diff --git a/.gitignore b/.gitignore index d9d799d4..36077c47 100644 --- a/.gitignore +++ b/.gitignore @@ -19,4 +19,6 @@ tests/components tests/utils tests/composables tests/index.ts* +.yarnrc.yml +.npmrc diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ca0bbd10..a57eb55c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,5 +13,5 @@ - 在本地添加一个 remote 分支: `git remote add upstream https://github.com/b2nil/taro-ui-vue3.git` - 同步 upstream 分支的代码：`git fetch upstream` - 进行需要的更改 -- PR 提交值本项目的 dev 分支 +- PR 提交至本项目的 dev 分支 diff --git a/build/esbuild.build.js b/build/esbuild.build.js index be36903d..50422fa5 100644 --- a/build/esbuild.build.js +++ b/build/esbuild.build.js @@ -5,7 +5,7 @@ const path = require('path') const toastPlugin = { name: 'toast', setup(build) { - build.onLoad({ filter: /toast\\index.ts$/ }, async (args) => { + build.onLoad({ filter: /toast.index\.ts$/ }, async (args) => { const text = await fs.promises.readFile(args.path, "utf8") const contents = text.replace("img.json", "img.js") return { diff --git a/config/h5-building-script.js b/config/h5-building-script.js index d891556f..a827605e 100644 --- a/config/h5-building-script.js +++ b/config/h5-building-script.js @@ -13,8 +13,9 @@ import Image from './components/image' import Icon from './components/icon' import ScrollView from './components/scroll-view' -const componentMap = {} + function genSimpleComponents(components) { + const componentMap = {} components.map(component => { if (typeof component === 'string') { componentMap[component] = createComponent(component) @@ -23,9 +24,10 @@ function genSimpleComponents(components) { componentMap[name] = createComponent(name, classNames) } }) + return componentMap } -genSimpleComponents(simpleComponents) +const componentMap = genSimpleComponents(simpleComponents) // simple components export const View = componentMap['taro-view'] @@ -74,9 +76,9 @@ export const Slider = createFormsComponent('taro-slider', 'change', 'value', ['w export function initVue3Components(app) { app.config.isCustomElement = tag => /^taro-/.test(tag) || tag === 'root' || tag === 'block' - simpleComponents.map(component => { - app.component(component, componentMap[component]) - }) + for (const [name, component] of Object.entries(componentMap)) { + app.component(name, component) + } app.component('taro-input', Input) app.component('taro-textarea', Textarea) diff --git a/package.json b/package.json index 21e01422..5335c28c 100644 --- a/package.json +++ b/package.json @@ -59,15 +59,15 @@ "build:qq": "taro build --type qq", "build:jd": "taro build --type jd", "build:quickapp": "taro build --type quickapp", - "dev:weapp": "taro build --type weapp --watch", - "dev:swan": "npm run build:swan -- --watch", - "dev:alipay": "npm run build:alipay -- --watch", - "dev:tt": "npm run build:tt -- --watch", - "dev:h5": "npm run build:h5 -- --watch", - "dev:rn": "npm run build:rn -- --watch", - "dev:qq": "npm run build:qq -- --watch", - "dev:jd": "npm run build:jd -- --watch", - "dev:quickapp": "npm run build:quickapp -- --watch", + "dev:weapp": "yarn dev && taro build --type weapp --watch", + "dev:swan": "yarn dev && taro build --type swan --watch", + "dev:alipay": "yarn dev && taro build --type alipay --watch", + "dev:tt": "yarn dev && taro build --type tt --watch", + "dev:h5": "yarn dev && node ./config/h5-building-script.js && taro build --type h5 --watch", + "dev:rn": "yarn dev && taro build --type rn --watch", + "dev:qq": "yarn dev && taro build --type qq --watch", + "dev:jd": "yarn dev && taro build --type jd --watch", + "dev:quickapp": "yarn dev && taro build --type quickapp --watch", "clean": "rimraf .temp dist lib coverage" }, "browserslist": [ @@ -80,32 +80,32 @@ "lodash-es": "^4.17.15" }, "peerDependencies": { - "@tarojs/components": "^3.0.15", - "@tarojs/taro": "^3.0.15", - "vue": "^3.0.0" + "@tarojs/components": "^3.1.4", + "@tarojs/taro": "^3.1.4", + "vue": "^3.0.6" }, "devDependencies": { "@babel/core": "^7.8.0", "@babel/runtime": "^7.7.7", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^9.0.0", - "@tarojs/components": "^3.0.15", - "@tarojs/mini-runner": "^3.0.15", - "@tarojs/runtime": "^3.0.15", - "@tarojs/taro": "^3.0.15", - "@tarojs/webpack-runner": "^3.0.15", + "@tarojs/components": "^3.1.4", + "@tarojs/mini-runner": "^3.1.4", + "@tarojs/runtime": "^3.1.4", + "@tarojs/taro": "^3.1.4", + "@tarojs/webpack-runner": "^3.1.4", "@types/jest": "^26.0.17", "@types/lodash-es": "^4.17.3", "@types/webpack-env": "^1.13.6", "@typescript-eslint/eslint-plugin": "^2.x", "@typescript-eslint/parser": "^2.x", "@vue/babel-plugin-jsx": "^1.0.0-rc.4", - "@vue/compiler-sfc": "^3.0.0", + "@vue/compiler-sfc": "^3.0.6", "@vue/test-utils": "2.0.0-rc.0", "babel-preset-taro": "^3.0.5", "cross-env": "^7.0.2", "csstype": "^2.6.11", - "esbuild": "^0.8.42", + "esbuild": "^0.9.0", "eslint": "^6.8.0", "eslint-config-taro": "^3.0.5", "eslint-plugin-vue": "^7.0.0-alpha.6", @@ -115,7 +115,6 @@ "rimraf": "^3.0.2", "rollup": "^2.29.0", "rollup-plugin-copy": "^3.3.0", - "rollup-plugin-esbuild": "^2.6.1", "rollup-plugin-sass": "^1.2.2", "rollup-plugin-typescript2": "^0.27.2", "shelljs": "^0.8.4", @@ -124,7 +123,7 @@ "ts-jest": "^26.4.4", "ts-loader": "^8.0.2", "typescript": "^3.7.0", - "vue": "^3.0.0", + "vue": "^3.0.6", "vue-jest": "^5.0.0-alpha.7", "vue-loader": "^16.1.0", "webpack-bundle-analyzer": "^4.2.0" diff --git a/src/components/action-sheet/index.ts b/src/components/action-sheet/index.ts index 394d6436..5c5f0fdb 100644 --- a/src/components/action-sheet/index.ts +++ b/src/components/action-sheet/index.ts @@ -64,7 +64,7 @@ const AtActionSheet = defineComponent({ return () => ( h(View, mergeProps(attrs, { class: rootClasses.value, - onTouchMove: handleTouchMove + onTouchmove: handleTouchMove }), { default: () => [ h(View, { diff --git a/src/components/button/index.ts b/src/components/button/index.ts index a38b7913..1af9156d 100644 --- a/src/components/button/index.ts +++ b/src/components/button/index.ts @@ -114,6 +114,13 @@ const AtButton = defineComponent({ } function handleGetUserInfo(event) { + warn( + "2021 年 4 月 13 日后发布的新版本小程序，", + "开发者调用 `wx.getUserInfo` 或 ` - diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts index bb537928..d0b6739c 100644 --- a/src/components/modal/index.ts +++ b/src/components/modal/index.ts @@ -167,7 +167,7 @@ const AtModal = defineComponent({ return ( h(View, mergeProps(attrs, { class: rootClasses.value, - onTouchMove: handleTouchMove, + onTouchmove: handleTouchMove, }), { default: () => [ h(View, { diff --git a/src/components/range/index.ts b/src/components/range/index.ts index 381efc17..72c74913 100644 --- a/src/components/range/index.ts +++ b/src/components/range/index.ts @@ -201,8 +201,8 @@ const AtRange = defineComponent({ key: `${sliderName} - ${index}`, class: 'at-range__slider', style: sliderName === 'aX' ? sliderAStyle.value : sliderBStyle.value, - onTouchEnd: handleTouchEnd.bind(this, sliderName), - onTouchMove: handleTouchMove.bind(this, sliderName), + onTouchend: handleTouchEnd.bind(this, sliderName), + onTouchmove: handleTouchMove.bind(this, sliderName), }) )) ] diff --git a/src/components/search-bar/index.ts b/src/components/search-bar/index.ts index 5306813f..595d4eaa 100644 --- a/src/components/search-bar/index.ts +++ b/src/components/search-bar/index.ts @@ -224,7 +224,7 @@ const AtSearchBar = defineComponent({ inputValue.value && h(View, { class: 'at-search-bar__clear', style: clearIconStyle.value, - onTouchStart: handleClear + onTouchstart: handleClear }, { default: () => [ h(Text, { class: 'at-icon at-icon-close-circle' }) diff --git a/src/components/swipe-action/index.ts b/src/components/swipe-action/index.ts index 0e1393c7..9eadda7e 100644 --- a/src/components/swipe-action/index.ts +++ b/src/components/swipe-action/index.ts @@ -219,9 +219,9 @@ const AtSwipeAction = defineComponent({ h(View, mergeProps(attrs, { id: `swipeAction-${state.componentId}`, class: 'at-swipe-action', - onTouchMove: handleTouchMove, - onTouchEnd: handleTouchEnd, - onTouchStart: handleTouchStart + onTouchmove: handleTouchMove, + onTouchend: handleTouchEnd, + onTouchstart: handleTouchStart }), { default: () => [ // action content diff --git a/src/components/tabs/index.ts b/src/components/tabs/index.ts index 27d5d551..c95686fd 100644 --- a/src/components/tabs/index.ts +++ b/src/components/tabs/index.ts @@ -269,9 +269,9 @@ const AtTabs = defineComponent({ h(View, { class: 'at-tabs__body', style: bodyStyle.value, - onTouchStart: handleTouchStart, - onTouchEnd: handleTouchEnd, - onTouchMove: handleTouchMove, + onTouchstart: handleTouchStart, + onTouchend: handleTouchEnd, + onTouchmove: handleTouchMove, }, { default: () => [ h(View, { diff --git a/src/components/textarea/__tests__/textarea.spec.ts b/src/components/textarea/__tests__/textarea.spec.ts index c877e3af..52c497eb 100644 --- a/src/components/textarea/__tests__/textarea.spec.ts +++ b/src/components/textarea/__tests__/textarea.spec.ts @@ -142,7 +142,7 @@ describe('AtTextArea Behaviour', () => { 'onFocus', 'onBlur', 'onConfirm', - 'onLineChange', + 'onLinechange', ])('should trigger %s', async (eventName) => { const eventHandler = jest.fn() const wrapper = factory({ [eventName]: eventHandler }) diff --git a/src/components/textarea/index.ts b/src/components/textarea/index.ts index b2266b12..0d237542 100644 --- a/src/components/textarea/index.ts +++ b/src/components/textarea/index.ts @@ -132,7 +132,7 @@ const AtTextarea = defineComponent({ onFocus: handleFocus, onBlur: handleBlur, onConfirm: handleConfirm, - onLineChange: handleLinechange, + onLinechange: handleLinechange, })), props.count && process.env.TARO_ENV !== 'alipay' && ( diff --git a/src/components/virtual-scroll/__tests__/virtual-scroll.spec.ts b/src/components/virtual-scroll/__tests__/virtual-scroll.spec.ts index 6823c687..81f26286 100644 --- a/src/components/virtual-scroll/__tests__/virtual-scroll.spec.ts +++ b/src/components/virtual-scroll/__tests__/virtual-scroll.spec.ts @@ -1,5 +1,5 @@ import { h } from '@vue/runtime-core' -import { mount } from '@vue/test-utils' +import { mountFactory, Slots } from '@/tests/helper' import AtVirtualScroll from '../index' import Taro from '@tarojs/taro' @@ -7,16 +7,13 @@ const elementHeight = 100 const mountFn = ( props = {}, - slots: any = { + slots: Slots = { default: ({ index, item }) => { - return h('view', { class: 'item' }, `${index}: item-${item}`) + return [h('view', { class: 'item' }, `${index}: item-${item}`)] } } ) => { - return mount(AtVirtualScroll, { - props, - slots - }) + return mountFactory(AtVirtualScroll, undefined, props, slots) } const props = { @@ -25,7 +22,6 @@ const props = { itemHeight: 50, } - describe('AtVirtualScroll', () => { let mock: jest.SpyInstance @@ -102,8 +98,8 @@ describe('AtVirtualScroll', () => { it('should render header slot', async () => { const wrapper = mountFn(props, { - default: ({ index, item }) => h('view', { class: 'item' }, `${index}: item-${item}`), - header: () => h('view') + default: ({ index, item }) => [h('view', { class: 'item' }, `${index}: item-${item}`)], + header: () => [h('view')] }) await wrapper.vm.$nextTick() @@ -113,8 +109,8 @@ describe('AtVirtualScroll', () => { it('should render footer slot', async () => { const wrapper = mountFn(props, { - default: ({ index, item }) => h('view', { class: 'item' }, `${index}: item-${item}`), - footer: () => h('view') + default: ({ index, item }) => [h('view', { class: 'item' }, `${index}: item-${item}`)], + footer: () => [h('view')] }) await wrapper.vm.$nextTick() diff --git a/src/components/virtual-scroll/index.ts b/src/components/virtual-scroll/index.ts index b42f3d12..1a0c2389 100644 --- a/src/components/virtual-scroll/index.ts +++ b/src/components/virtual-scroll/index.ts @@ -179,8 +179,8 @@ const AtVirtualScroll = defineComponent({ lowerThreshold: parseInt(`${props.reachBottomThreshold}`, 10), ref: (e) => { elRef.value = e }, onScroll: handleScroll, - onScrollToUpper: props.onReachTop, - onScrollToLower: props.onReachBottom, + onScrolltoupper: props.onReachTop, + onScrolltolower: props.onReachBottom, }), { default: () => [content] }) return h(View, null, { diff --git a/src/pages/form/form/index.ts b/src/pages/form/form/index.ts deleted file mode 100644 index 006dfe02..00000000 --- a/src/pages/form/form/index.ts +++ /dev/null @@ -1,137 +0,0 @@ -import { h, defineComponent, reactive } from 'vue' -import { CheckboxOption } from 'types/checkbox' -import { View } from '@tarojs/components' -import './index.scss' - -interface PageFormState { - value1: string - value2: string - value3: CheckboxOption[] - text: string - isOpened: boolean - [key: string]: string | boolean | CheckboxOption[] -} - -export default defineComponent({ - setup() { - - const state = reactive({ - value1: '', - value2: '', - value3: [], - text: '', - isOpened: false - }) - - function handleChange(stateName: string, value: any): void { - state[stateName] = value - } - - function handleSubmit(): void { - const { value1, value2, value3 } = state - if (!value1 || !value2) { - state.isOpened = true - state.text = `表单必填项未填写完整` - } else { - state.isOpened = true - state.text = - value3 && value3.length > 0 - ? `${value1} / ${value2} / ${value3.join(',')}` - : `${value1} / ${value2}` - } - closeToast() - } - - function closeToast(): void { - setTimeout(() => { - state.isOpened = false - }, 2000) - } - - function handleReset(): void { - state.isOpened = true - state.text = `表单已被重置` - state.value1 = '' - state.value2 = '' - state.value3 = [] - closeToast() - } - - return () => ( - h(Page, { headerTitle: 'Form 表单' }, { - default: () => [ - /* 表单提交与重置*/ - h(Panel, { title: '表单提交与重置', noPadding: true }, { - default: () => [ - h(View, { class: 'component-item' }, { - default: () => [ - h(AtForm, { - onSubmit: handleSubmit.bind(this), - onReset: handleReset.bind(this), - }, { - default: () => [ - h(AtInput, { - required: true, - name: 'value1', - title: '文本', - type: 'text', - placeholder: '单行文本', - value: state.value1, - onChange: handleChange.bind(this, 'value1'), - }), - - h(AtInput, { - required: true, - name: 'value2', - title: '密码', - type: 'password', - placeholder: '请输入密码', - value: state.value2, - onChange: handleChange.bind(this, 'value2'), - }), - - h(AtCheckbox, { - options: - [ - { label: 'iPhone X', value: 'iPhone X' }, - { label: 'HUAWEI P20', value: 'HUAWEI P20' } - ], - selectedList: state.value3, - onChange: handleChange.bind(this, 'value3'), - }), - - h(View, { class: 'component-item__btn-group' }, { - default: () => [ - h(View, { class: 'component-item__btn-group__btn-item' }, { - default: () => [ - h(AtButton, { - type: 'primary', - formType: 'submit' - }, { default: () => '提交' }) - ] - }), - - h(View, { class: 'component-item__btn-group__btn-item' }, { - default: () => [ - h(AtButton, { formType: 'reset' }, { default: () => '重置' }) - ] - }), - ] - }), - ] - }) - ] - }), - ] - }), - ], - extra: () => [ - h(AtToast, { - text: state.text, - isOpened: state.isOpened, - }) - ] - }) - ) - } -}) diff --git a/src/pages/form/form/index.vue b/src/pages/form/form/index.vue new file mode 100644 index 00000000..272bea8a --- /dev/null +++ b/src/pages/form/form/index.vue @@ -0,0 +1,126 @@ + + + diff --git a/src/pages/form/image-picker/index.ts b/src/pages/form/image-picker/index.ts deleted file mode 100644 index bdadc3ef..00000000 --- a/src/pages/form/image-picker/index.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { h, defineComponent, reactive } from 'vue' -import Taro from '@tarojs/taro' -import './index.scss' - -type DogaImage = { - url: string -} - -const dogaImages: DogaImage[] = [ - { - url: 'https://storage.360buyimg.com/mtd/home/111543234387022.jpg' - }, - { - url: 'https://storage.360buyimg.com/mtd/home/221543234387016.jpg' - }, - { - url: 'https://storage.360buyimg.com/mtd/home/331543234387025.jpg' - } -] - -interface IndexState { - [key: string]: DogaImage[] -} - -export default defineComponent({ - - setup() { - - const state = reactive({ - files1: Array.from(dogaImages), - files2: Array.from(dogaImages), - files3: Array.from(dogaImages), - files4: dogaImages.concat([ - { - url: - 'https://storage.360buyimg.com/mtd/home/36549825_887087111478302_5745542532574478336_n1543234831971.jpg' - } - ]) - }) - - function onChange(stateName: string, files: DogaImage[]): void { - state[stateName] = files - } - - function onFail(mes: string): void { - Taro.showToast({ - title: `onFail: ${JSON.stringify(mes)}`, - icon: 'none' - }) - } - - function onImageClick(index: number, file: DogaImage): void { - Taro.showToast({ - title: `onImageClick: ${index}${JSON.stringify(file)}`, - icon: 'none' - }) - } - - return () => { - return ( - h(Page, { headerTitle: 'ImagePicker 图片选择器' }, { - default: () => [ - - /* 基础用法*/ - h(Panel, { title: '基础用法', noPadding: true }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(AtImagePicker, { - files: state.files1, - onChange: onChange.bind(this, 'files1'), - }) - ] - }), - ] - }), - - /* 多选图片*/ - h(Panel, { title: '多选图片', noPadding: true }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(AtImagePicker, { - multiple: true, - files: state.files2, - onChange: onChange.bind(this, 'files2'), - onFail: onFail.bind(this), - onImageClick: onImageClick.bind(this), - }) - ] - }), - ] - }), - - /* 自定义每行数量*/ - h(Panel, { title: '自定义每行数量', noPadding: true }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(AtImagePicker, { - multiple: true, - length: 3, - files: state.files3, - onChange: onChange.bind(this, 'files3'), - }) - ] - }), - ] - }), - - /* 更改图片的缩放模式*/ - h(Panel, { title: '更改图片的缩放模式', noPadding: true }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(AtImagePicker, { - mode: 'aspectFit', - multiple: true, - files: state.files4, - onChange: onChange.bind(this, 'files4'), - }) - ] - }), - ] - }), - ] - }) - ) - } - } -}) diff --git a/src/pages/form/image-picker/index.vue b/src/pages/form/image-picker/index.vue new file mode 100644 index 00000000..59a6be20 --- /dev/null +++ b/src/pages/form/image-picker/index.vue @@ -0,0 +1,128 @@ + + + \ No newline at end of file diff --git a/src/pages/form/picker-view/index.ts b/src/pages/form/picker-view/index.ts deleted file mode 100644 index 28c6b82c..00000000 --- a/src/pages/form/picker-view/index.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { h, defineComponent, reactive, onMounted } from 'vue' -import { PickerView, PickerViewColumn, View } from '@tarojs/components' -import { CommonEvent } from '@tarojs/components/types/common' -import Taro from '@tarojs/taro' -import './index.scss' - -interface IndexState { - years: number[] - year: number - months: number[] - month: number - days: number[] - day: number - value: number[] - isWeapp: boolean - isAlipay: boolean -} - -export default defineComponent({ - - setup() { - - const date = new Date() - const years: number[] = [] - const months: number[] = [] - const days: number[] = [] - - for (let i = 1990; i <= date.getFullYear(); i++) { - years.push(i) - } - for (let i = 1; i <= 12; i++) { - months.push(i) - } - for (let i = 1; i <= 31; i++) { - days.push(i) - } - - const state = reactive({ - years, - year: date.getFullYear(), - months, - month: date.getMonth() + 1, - days, - day: date.getDate(), - value: [30, date.getMonth(), date.getDate() - 1], - isWeapp: false, - isAlipay: false - }) - - onMounted(() => { - const env = Taro.getEnv() - state.isWeapp = env === Taro.ENV_TYPE.WEAPP - state.isAlipay = env === Taro.ENV_TYPE.ALIPAY - }) - - const handleChange = (e: CommonEvent): void => { - const val = e.detail.value - state.value = val - state.year = state.years[val[0]] - state.month = state.months[val[1]] - state.day = state.days[val[2]] - } - - return () => ( - h(Page, { headerTitle: 'Picker View 滚动选择器' }, { - default: () => [ - h(Panel, { title: '基础用法', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(View, { class: 'example-item__desc' }, { default: () => '嵌入页面的滑动选择器' }), - - state.isWeapp || state.isAlipay - ? ( - h(View, null, { - default: () => [ - h(View, { - class: 'title-date' - }, { default: () => `${state.year} 年 ${state.month} 月 ${state.day} 日` }), - - h(PickerView, { - class: 'picker', - indicatorStyle: 'height: 50px;', - style: 'width: 100%; height: 300px; text-align: center;', - value: state.value, - onChange: handleChange, - }, { - default: () => [ - h(PickerViewColumn, null, state.years.map((item, idx) => ( - h(View, { - key: `years-${idx}`, - style: 'line-height: 50px; ' - }, { default: () => `${item} 年` }) - ))), - - h(PickerViewColumn, null, state.months.map((item, idx) => ( - h(View, { - key: `months-${idx}`, - style: 'line-height: 50px;' - }, { default: () => `${item} 月` }) - ))), - - h(PickerViewColumn, null, state.days.map((item, idx) => ( - h(View, { - key: `days-${idx}`, - style: 'line-height: 50px;' - }, { default: () => `${item} 日` }) - ))), - ] - }) - ] - }) - ) - : ( - h(View, { class: 'title-date' }, { default: () => '暂时仅支持微信小程序' }) - ) - ] - }) - ] - }), - ] - }) - ) - } -}) diff --git a/src/pages/form/picker-view/index.vue b/src/pages/form/picker-view/index.vue new file mode 100644 index 00000000..9832a719 --- /dev/null +++ b/src/pages/form/picker-view/index.vue @@ -0,0 +1,117 @@ + + + \ No newline at end of file diff --git a/src/pages/form/picker/index.ts b/src/pages/form/picker/index.ts deleted file mode 100644 index f84cad34..00000000 --- a/src/pages/form/picker/index.ts +++ /dev/null @@ -1,185 +0,0 @@ -import { h, defineComponent, reactive, onMounted } from 'vue' -import { Picker, View } from '@tarojs/components' -import { CommonEvent } from '@tarojs/components/types/common' -import Taro from '@tarojs/taro' -import './index.scss' - -interface IndexState { - selector: string[] - multiSelector: string[][] - selectorValue: number - mulitSelectorValues: number[] - timeSel: string - dateSel: string - isAlipay: boolean -} - -export default defineComponent({ - - setup() { - - const state = reactive({ - selector: ['中国', '美国', '巴西', '日本'], - multiSelector: [ - ['饭', '粥', '粉'], - ['猪肉', '牛肉'] - ], - selectorValue: 0, - mulitSelectorValues: [0, 1], - timeSel: '06:18', - dateSel: '2018-06-18', - isAlipay: false - }) - - onMounted(() => { - const env = Taro.getEnv() - state.isAlipay = env === Taro.ENV_TYPE.ALIPAY - }) - - const handleChange = (e: CommonEvent): void => { - state.selectorValue = e.detail.value - } - - const handleMulitChange = (e: CommonEvent): void => { - state.mulitSelectorValues = e.detail.value - } - - const handleTimeChange = (e: CommonEvent): void => { - state.timeSel = e.detail.value - } - - const handleDateChange = (e: CommonEvent): void => { - state.dateSel = e.detail.value - } - - return () => { - const { - selector, - selectorValue, - multiSelector, - mulitSelectorValues, - timeSel, - dateSel, - isAlipay - } = state - - return ( - h(Page, { - class: 'picker__page', - headerTitle: 'Picker 选择器' - }, { - default: () => [ - /* 普通选择器*/ - h(Panel, { title: '普通选择器', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(Picker, { - mode: 'selector', - range: selector, - value: selectorValue, - onChange: handleChange, - }, { - default: () => [ - h(View, { class: 'demo-list-item' }, { - default: () => [ - h(View, { class: 'demo-list-item__label' }, { default: () => '国家地区' }), - h(View, { class: 'demo-list-item__value' }, { - default: () => - selector[selectorValue] - }), - ] - }), - ] - }), - ] - }), - ] - }), - - /* 多列选择器*/ - !isAlipay && ( - h(Panel, { title: '多列选择器', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(Picker, { - mode: 'multiSelector', - range: multiSelector, - value: mulitSelectorValues, - onChange: handleMulitChange, - }, { - default: () => [ - h(View, { class: 'demo-list-item' }, { - default: () => [ - h(View, { class: 'demo-list-item__label' }, { default: () => '请选择早餐' }), - h(View, { class: 'demo-list-item__value' }, { - default: () => [ - `${multiSelector[0][mulitSelectorValues[0]] - } & ${multiSelector[1][mulitSelectorValues[1]]}` - ] - }), - ] - }), - ] - }), - ] - }) - ] - }) - ), - - /* 时间选择器*/ - h(Panel, { title: '时间选择器', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(Picker, { - mode: 'time', - value: timeSel, - onChange: handleTimeChange, - }, { - default: () => [ - h(View, { class: 'demo-list-item' }, { - default: () => [ - h(View, { class: 'demo-list-item__label' }, { default: () => '请选择时间' }), - h(View, { class: 'demo-list-item__value' }, { default: () => timeSel }), - ] - }), - - ] - }), - ] - }), - ] - }), - - /* 日期选择器*/ - h(Panel, { title: '日期选择器', }, { - default: () => [ - h(ExampleItem, null, { - default: () => [ - h(Picker, { - mode: 'date', - value: dateSel, - onChange: handleDateChange, - }, { - default: () => [ - h(View, { class: 'demo-list-item' }, { - default: () => [ - h(View, { class: 'demo-list-item__label' }, { default: () => '请选择日期' }), - h(View, { class: 'demo-list-item__value' }, { default: () => dateSel }), - ] - }) - ] - }) - ] - }), - ] - }) - ] - }) - ) - } - } -}) diff --git a/src/pages/form/picker/index.vue b/src/pages/form/picker/index.vue new file mode 100644 index 00000000..fdcc1d6f --- /dev/null +++ b/src/pages/form/picker/index.vue @@ -0,0 +1,149 @@ + + + diff --git a/src/pages/form/range/index.vue b/src/pages/form/range/index.vue index e448cdb1..a0321596 100644 --- a/src/pages/form/range/index.vue +++ b/src/pages/form/range/index.vue @@ -41,7 +41,7 @@ interface IndexState { } export default defineComponent({ - name: "SliderDemo", + name: "RangeDemo", setup() { diff --git a/src/pages/form/slider/index.vue b/src/pages/form/slider/index.vue index 6727ee84..b5be5e00 100644 --- a/src/pages/form/slider/index.vue +++ b/src/pages/form/slider/index.vue @@ -1,13 +1,13 @@