hookehuyr

๐ŸŽ‰ init: ้กน็›ฎๅˆๅง‹ๅŒ–

Showing 485 changed files with 2519 additions and 0 deletions
1 +# http://editorconfig.org
2 +root = true
3 +
4 +[*]
5 +indent_style = space
6 +indent_size = 2
7 +charset = utf-8
8 +trim_trailing_whitespace = true
9 +insert_final_newline = true
10 +
11 +[*.md]
12 +trim_trailing_whitespace = false
1 +// ESLint ๆฃ€ๆŸฅ .vue ๆ–‡ไปถ้œ€่ฆๅ•็‹ฌ้…็ฝฎ็ผ–่พ‘ๅ™จ๏ผš
2 +// https://eslint.vuejs.org/user-guide/#editor-integrations
3 +{
4 + "extends": ["taro/vue3"]
5 +}
6 +
1 +dist/
2 +deploy_versions/
3 +.temp/
4 +.rn_temp/
5 +node_modules/
6 +.DS_Store
7 +doc
8 +.history
1 +// babel-preset-taro ๆ›ดๅคš้€‰้กนๅ’Œ้ป˜่ฎคๅ€ผ๏ผš
2 +// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
3 +module.exports = {
4 + presets: [
5 + ['taro', {
6 + framework: 'vue3',
7 + ts: false
8 + }]
9 + ]
10 +}
1 +module.exports = {
2 + env: {
3 + NODE_ENV: '"development"',
4 + // ๆทปๅŠ SERVICES_BASE_URLๅ˜้‡
5 + SERVICES_BASE_URL: '"http://xxx"',
6 + },
7 + defineConstants: {
8 + },
9 + mini: {},
10 + h5: {}
11 +}
1 +const path = require('path')
2 +const fs = require('fs')
3 +const vantComponentNames = require("../vantComponentConf")
4 +
5 +const handleGetPatterns = (keyArr) => {
6 + // ่ฟ™ไบ›ไธบๅ…ฌๅ…ฑ็ป„ไปถ
7 + const defaultArr = [
8 + {
9 + from: "src/components/vant-weapp/wxs",
10 + to: "dist/components/vant-weapp/wxs",
11 + },
12 + {
13 + from: "src/components/vant-weapp/common",
14 + to: "dist/components/vant-weapp/common",
15 + },
16 + ];
17 +
18 + const componentArr = keyArr
19 + .map((componentName) => {
20 + // ๅŒๆญฅๆฃ€ๆต‹่ฟ™ไธชๆ–‡ไปถๆ˜ฏๅฆๅญ˜ๅœจ
21 + // ๅ› ไธบvant weapp้ƒจๅˆ†็ป„ไปถๆ–‡ไปถไธ‹็š„ไธๅญ˜ๅœจ wxs ๆ–‡ไปถ
22 + const componentPath = path.resolve(
23 + __dirname,
24 + `../src/components/vant-weapp/${componentName}/index.wxs`
25 + );
26 +
27 + const isState = fs.statSync(componentPath, { throwIfNoEntry: false });
28 +
29 + return [
30 + {
31 + from: `src/components/vant-weapp/${componentName}/index.${isState ? "wxs" : "wxss"
32 + }`,
33 + to: `dist/components/vant-weapp/${componentName}/index.${isState ? "wxs" : "wxss"
34 + }`,
35 + },
36 + {
37 + from:
38 + "src/components/vant-weapp/" + componentName + "/index.wxml",
39 + to:
40 + "dist/components/vant-weapp/" + componentName + "/index.wxml",
41 + },
42 + ];
43 + })
44 + .flat(Infinity);
45 +
46 + return [...defaultArr, ...componentArr];
47 +};
48 +
49 +const config = {
50 + projectName: 'tswj-weapp',
51 + date: '2022-5-27',
52 + designWidth: 750,
53 + deviceRatio: {
54 + 640: 2.34 / 2,
55 + 750: 1,
56 + 828: 1.81 / 2
57 + },
58 + alias: {
59 + "@/utils": path.resolve(__dirname, "../src/utils"),
60 + "@/vant": path.resolve(__dirname, "../src/components/vant-weapp"),
61 + },
62 + sourceRoot: 'src',
63 + outputRoot: 'dist',
64 + // outputRoot: `dist/${process.env.TARO_ENV}`,
65 + plugins: [
66 + 'taro-plugin-pinia',
67 + "tarojs-plugin-platform-miniprogram", // ่‡ชๅฎšไน‰ wxml ๆ”ฏๆŒ
68 + ['@tarojs/plugin-framework-vue3', {
69 + mini: {
70 + compilerOptions: {
71 + isCustomElement: tag => ["van-tab", "van-tabs"].includes(tag),
72 + whitespace: 'preserve'
73 + }
74 + }
75 + }],
76 + '@tarojs/plugin-html'
77 + ],
78 + defineConstants: {
79 + },
80 + copy: {
81 + patterns: handleGetPatterns(vantComponentNames),
82 + // patterns: [
83 + // // ๅ‰้ข2ไธชๆ˜ฏๅŸบ็ก€็š„
84 + // {
85 + // from: "src/components/vant-weapp/wxs",
86 + // to: "dist/components/vant-weapp/wxs",
87 + // },
88 + // {
89 + // from: "src/components/vant-weapp/common",
90 + // to: "dist/components/vant-weapp/common",
91 + // },
92 + // // ้œ€่ฆ็”จๅˆฐvantๅ“ชไธช็ป„ไปถๅฐฑๅผ•ๅ…ฅ
93 + // {
94 + // from: "src/components/vant-weapp/button",
95 + // to: "dist/components/vant-weapp/button",
96 + // },
97 + // {
98 + // from: "src/components/vant-weapp/info",
99 + // to: "dist/components/vant-weapp/info",
100 + // },
101 + // {
102 + // from: "src/components/vant-weapp/icon",
103 + // to: "dist/components/vant-weapp/icon",
104 + // },
105 + // {
106 + // from: "src/components/vant-weapp/loading",
107 + // to: "dist/components/vant-weapp/loading",
108 + // },
109 + // {
110 + // from: "src/components/vant-weapp/tab",
111 + // to: "dist/components/vant-weapp/tab",
112 + // },
113 + // {
114 + // from: "src/components/vant-weapp/tabs",
115 + // to: "dist/components/vant-weapp/tabs",
116 + // },
117 + // {
118 + // from: "src/components/vant-weapp/sticky",
119 + // to: "dist/components/vant-weapp/sticky",
120 + // },
121 + // ],
122 + options: {
123 + }
124 + },
125 + framework: 'vue3',
126 + mini: {
127 + optimizeMainPackage: {
128 + enable: true
129 + },
130 + webpackChain(chain) {
131 + chain.merge({
132 + module: {
133 + rule: {
134 + mjsScript: {
135 + test: /\.mjs$/,
136 + include: [/pinia/],
137 + use: {
138 + babelLoader: {
139 + loader: require.resolve('babel-loader')
140 + }
141 + }
142 + }
143 + }
144 + }
145 + })
146 + },
147 + postcss: {
148 + pxtransform: {
149 + enable: true,
150 + config: {
151 + // ่ฟ‡ๆปค vant ็ป„ไปถๅบ“็š„ๅ‰็ผ€๏ผšvan-
152 + selectorBlackList: [/van-/],
153 + }
154 + },
155 + url: {
156 + enable: true,
157 + config: {
158 + limit: 1024 // ่ฎพๅฎš่ฝฌๆขๅฐบๅฏธไธŠ้™
159 + }
160 + },
161 + cssModules: {
162 + enable: false, // ้ป˜่ฎคไธบ false๏ผŒๅฆ‚้œ€ไฝฟ็”จ css modules ๅŠŸ่ƒฝ๏ผŒๅˆ™่ฎพไธบ true
163 + config: {
164 + namingPattern: 'module', // ่ฝฌๆขๆจกๅผ๏ผŒๅ–ๅ€ผไธบ global/module
165 + generateScopedName: '[name]__[local]___[hash:base64:5]'
166 + }
167 + }
168 + }
169 + },
170 + h5: {
171 + publicPath: '/',
172 + staticDirectory: 'static',
173 + postcss: {
174 + autoprefixer: {
175 + enable: true,
176 + config: {
177 + }
178 + },
179 + cssModules: {
180 + enable: false, // ้ป˜่ฎคไธบ false๏ผŒๅฆ‚้œ€ไฝฟ็”จ css modules ๅŠŸ่ƒฝ๏ผŒๅˆ™่ฎพไธบ true
181 + config: {
182 + namingPattern: 'module', // ่ฝฌๆขๆจกๅผ๏ผŒๅ–ๅ€ผไธบ global/module
183 + generateScopedName: '[name]__[local]___[hash:base64:5]'
184 + }
185 + }
186 + }
187 + }
188 +}
189 +
190 +module.exports = function (merge) {
191 + if (process.env.NODE_ENV === 'development') {
192 + return merge({}, config, require('./dev'))
193 + }
194 + return merge({}, config, require('./prod'))
195 +}
1 +module.exports = {
2 + env: {
3 + NODE_ENV: '"production"',
4 + // ่ฟ™้‡ŒๆทปๅŠ ็š„ DEV_MODE_ENV ๅฐฑ่ตทไฝœ็”จไบ†๏ผŒ่ฟ›่กŒ็”Ÿไบงใ€ๅผ€ๅ‘ๅŒบๅˆ†๏ผŒไธ็”จๆฏๆฌกๆ‰‹ๅŠจๅŽปๆ”นไบ†
5 + SERVICES_BASE_URL:
6 + process.env.DEV_MODE_ENV === "true" ? "http://xxx" : "https://xxx",
7 + // ไปฃ็ ้‡Œ่ฎฟ้—ฎ`process.env.SERVICES_BASE_URL`ๆ˜ฏๅฏไปฅๆญฃๅธธ่Žทๅ–ๅˆฐ็š„
8 + },
9 + defineConstants: {
10 + },
11 + mini: {},
12 + h5: {
13 + /**
14 + * ๅฆ‚ๆžœh5็ซฏ็ผ–่ฏ‘ๅŽไฝ“็งฏ่ฟ‡ๅคง๏ผŒๅฏไปฅไฝฟ็”จwebpack-bundle-analyzerๆ’ไปถๅฏนๆ‰“ๅŒ…ไฝ“็งฏ่ฟ›่กŒๅˆ†ๆžใ€‚
15 + * ๅ‚่€ƒไปฃ็ ๅฆ‚ไธ‹๏ผš
16 + * webpackChain (chain) {
17 + * chain.plugin('analyzer')
18 + * .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
19 + * }
20 + */
21 + }
22 +}
1 +{
2 + "name": "swx-weapp",
3 + "version": "1.0.0",
4 + "private": true,
5 + "description": "่ƒœๆ–‡่ฝฉๅฐ็จ‹ๅบ",
6 + "templateInfo": {
7 + "name": "vue3-pinia",
8 + "typescript": false,
9 + "css": "less"
10 + },
11 + "scripts": {
12 + "build:weapp": "cross-env DEV_MODE_ENV=false taro build --type weapp",
13 + "build:swan": "taro build --type swan",
14 + "build:alipay": "taro build --type alipay",
15 + "build:tt": "taro build --type tt",
16 + "build:h5": "taro build --type h5",
17 + "build:rn": "taro build --type rn",
18 + "build:qq": "taro build --type qq",
19 + "build:quickapp": "taro build --type quickapp",
20 + "dev:weapp": "cross-env NODE_ENV=production DEV_MODE_ENV=true taro build --type weapp --watch",
21 + "dev:swan": "npm run build:swan -- --watch",
22 + "dev:alipay": "npm run build:alipay -- --watch",
23 + "dev:tt": "npm run build:tt -- --watch",
24 + "dev:h5": "npm run build:h5 -- --watch",
25 + "dev:rn": "npm run build:rn -- --watch",
26 + "dev:qq": "npm run build:qq -- --watch",
27 + "dev:quickapp": "npm run build:quickapp -- --watch"
28 + },
29 + "browserslist": [
30 + "last 3 versions",
31 + "Android >= 4.1",
32 + "ios >= 8"
33 + ],
34 + "author": "",
35 + "license": "MIT",
36 + "dependencies": {
37 + "@babel/runtime": "^7.7.7",
38 + "@tarojs/components": "3.4.10",
39 + "@tarojs/plugin-framework-react": "^3.4.10",
40 + "@tarojs/plugin-framework-vue3": "3.4.10",
41 + "@tarojs/plugin-html": "^3.4.10",
42 + "@tarojs/plugin-platform-weapp": "^3.4.10",
43 + "@tarojs/runtime": "3.4.10",
44 + "@tarojs/taro": "3.4.10",
45 + "@vant/weapp": "^1.10.3",
46 + "axios": "^0.27.2",
47 + "axios-miniprogram": "^2.0.0-rc-2",
48 + "pinia": "^2.0.6",
49 + "taro-plugin-pinia": "^1.0.0",
50 + "vant": "^4.0.0-alpha.3",
51 + "vue": "^3.2.24"
52 + },
53 + "devDependencies": {
54 + "@babel/core": "^7.8.0",
55 + "@tarojs/mini-runner": "3.4.10",
56 + "@tarojs/webpack-runner": "3.4.10",
57 + "@types/webpack-env": "^1.13.6",
58 + "babel-preset-taro": "3.4.10",
59 + "cross-env": "^7.0.3",
60 + "eslint": "^8.12.0",
61 + "eslint-config-taro": "3.4.10",
62 + "eslint-plugin-vue": "^8.0.0",
63 + "stylelint": "9.3.0",
64 + "tarojs-plugin-platform-miniprogram": "^0.1.1",
65 + "vue-loader": "^16.8.3"
66 + }
67 +}
1 +{
2 + "miniprogramRoot": "./dist",
3 + "projectname": "swx-weapp",
4 + "description": "่ƒœๆ–‡่ฝฉๅฐ็จ‹ๅบ",
5 + "appid": "touristappid",
6 + "setting": {
7 + "urlCheck": true,
8 + "es6": false,
9 + "postcss": false,
10 + "minified": false,
11 + "checkSiteMap": false
12 + },
13 + "compileType": "miniprogram"
14 +}
1 +{
2 + "miniprogramRoot": "./",
3 + "projectname": "swx-weapp",
4 + "description": "่ƒœๆ–‡่ฝฉๅฐ็จ‹ๅบ",
5 + "appid": "touristappid",
6 + "setting": {
7 + "urlCheck": true,
8 + "es6": false,
9 + "postcss": false,
10 + "minified": false
11 + },
12 + "compileType": "miniprogram"
13 +}
1 +/*
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-27 15:57:59
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-06-06 14:47:04
6 + * @FilePath: /taro-vant-weapp/src/app.config.js
7 + * @Description:
8 + */
9 +const vantComponentNames = require("../vantComponentConf");
10 +
11 +const getVantComponentConf = (arr) => {
12 + const result = {};
13 + arr.forEach((key) => {
14 + result[`van-${key}`] = `./components/vant-weapp/${key}/index`;
15 + });
16 +
17 + return result;
18 +};
19 +
20 +export default {
21 + pages: [
22 + 'pages/index/index',
23 + 'pages/foo/index',
24 + ],
25 + subpackages: [ // ้…็ฝฎๅœจtabBarไธญ็š„้กต้ขไธ่ƒฝๅˆ†ๅŒ…ๅ†™ๅˆฐsubpackagesไธญๅŽป
26 + {
27 + root: "pages/demo",
28 + pages: ["index"],
29 + },
30 + ],
31 + window: {
32 + backgroundTextStyle: 'light',
33 + navigationBarBackgroundColor: '#fff',
34 + navigationBarTitleText: 'WeChat',
35 + navigationBarTextStyle: 'black'
36 + },
37 + usingComponents: {
38 + ...getVantComponentConf(vantComponentNames),
39 + // "van-button": "./components/vant-weapp/button/index",
40 + // "van-tab": "./components/vant-weapp/tab/index",
41 + // "van-tabs": "./components/vant-weapp/tabs/index"
42 + },
43 +}
1 +/*
2 + * @Date: 2022-09-19 14:11:05
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-09-19 14:18:43
5 + * @FilePath: /swx/src/app.js
6 + * @Description: ๆ–‡ไปถๆ่ฟฐ
7 + */
8 +import { createApp } from 'vue'
9 +import { createPinia } from 'pinia'
10 +
11 +import './app.less'
12 +
13 +const App = createApp({
14 + // ๅฏไปฅไฝฟ็”จๆ‰€ๆœ‰็š„ Vue ็”Ÿๅ‘ฝๅ‘จๆœŸๆ–นๆณ•
15 + mounted () {},
16 +
17 + // ๅฏนๅบ” onLaunch
18 + onLaunch () {},
19 +
20 + // ๅฏนๅบ” onShow
21 + onShow (options) {},
22 +
23 + // ๅฏนๅบ” onHide
24 + onHide () {},
25 +
26 + // ๅ…ฅๅฃ็ป„ไปถไธ้œ€่ฆๅฎž็Žฐ render ๆ–นๆณ•๏ผŒๅณไฝฟๅฎž็Žฐไบ†ไนŸไผš่ขซ taro ๆ‰€่ฆ†็›–
27 +})
28 +
29 +App.use(createPinia())
30 +
31 +export default App
File mode changed
1 +<template>
2 + <view>
3 + <text class="title">{{ counter.count }}</text>
4 + <view class="button" @tap="onAdd">ADD</view>
5 + </view>
6 +</template>
7 +
8 +<script>
9 +import { useCounterStore } from '../stores/counter'
10 +
11 +export default {
12 + setup() {
13 + const counter = useCounterStore()
14 +
15 + const onAdd = () => {
16 + counter.count++
17 +
18 + // with autocompletion โœจ
19 + // counter.$patch({count: counter.count + 1})
20 +
21 + // or using an action instead
22 + // counter.increment()
23 + }
24 +
25 + return {
26 + counter,
27 + onAdd
28 + }
29 + }
30 +}
31 +</script>
32 +
33 +<style>
34 +.title {
35 + font-size: 32px;
36 +}
37 +.button {
38 + border: 1px solid lightgray;
39 + padding: 5px 10px;
40 +}
41 +</style>
1 +import { VantComponent } from '../common/component';
2 +import { button } from '../mixins/button';
3 +VantComponent({
4 + mixins: [button],
5 + props: {
6 + show: Boolean,
7 + title: String,
8 + cancelText: String,
9 + description: String,
10 + round: {
11 + type: Boolean,
12 + value: true,
13 + },
14 + zIndex: {
15 + type: Number,
16 + value: 100,
17 + },
18 + actions: {
19 + type: Array,
20 + value: [],
21 + },
22 + overlay: {
23 + type: Boolean,
24 + value: true,
25 + },
26 + closeOnClickOverlay: {
27 + type: Boolean,
28 + value: true,
29 + },
30 + closeOnClickAction: {
31 + type: Boolean,
32 + value: true,
33 + },
34 + safeAreaInsetBottom: {
35 + type: Boolean,
36 + value: true,
37 + },
38 + },
39 + methods: {
40 + onSelect(event) {
41 + const { index } = event.currentTarget.dataset;
42 + const { actions, closeOnClickAction, canIUseGetUserProfile } = this.data;
43 + const item = actions[index];
44 + if (item) {
45 + this.$emit('select', item);
46 + if (closeOnClickAction) {
47 + this.onClose();
48 + }
49 + if (item.openType === 'getUserInfo' && canIUseGetUserProfile) {
50 + wx.getUserProfile({
51 + desc: item.getUserProfileDesc || ' ',
52 + complete: (userProfile) => {
53 + this.$emit('getuserinfo', userProfile);
54 + },
55 + });
56 + }
57 + }
58 + },
59 + onCancel() {
60 + this.$emit('cancel');
61 + },
62 + onClose() {
63 + this.$emit('close');
64 + },
65 + onClickOverlay() {
66 + this.$emit('click-overlay');
67 + this.onClose();
68 + },
69 + },
70 +});
1 +{
2 + "component": true,
3 + "usingComponents": {
4 + "van-icon": "../icon/index",
5 + "van-popup": "../popup/index",
6 + "van-loading": "../loading/index"
7 + }
8 +}
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +
3 +<van-popup
4 + show="{{ show }}"
5 + position="bottom"
6 + round="{{ round }}"
7 + z-index="{{ zIndex }}"
8 + overlay="{{ overlay }}"
9 + custom-class="van-action-sheet"
10 + safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
11 + close-on-click-overlay="{{ closeOnClickOverlay }}"
12 + bind:close="onClickOverlay"
13 +>
14 + <view wx:if="{{ title }}" class="van-action-sheet__header">
15 + {{ title }}
16 + <van-icon
17 + name="cross"
18 + custom-class="van-action-sheet__close"
19 + bind:click="onClose"
20 + />
21 + </view>
22 + <view wx:if="{{ description }}" class="van-action-sheet__description van-hairline--bottom">
23 + {{ description }}
24 + </view>
25 + <view wx:if="{{ actions && actions.length }}">
26 + <!-- buttonๅค–ๅŒ…ไธ€ๅฑ‚view๏ผŒ้˜ฒๆญขactionsๅŠจๆ€ๅ˜ๅŒ–๏ผŒๅฏผ่‡ดๆธฒๆŸ“ๆ—ถbutton่ขซๆ‰“ๆ•ฃ -->
27 + <button
28 + wx:for="{{ actions }}"
29 + wx:key="index"
30 + open-type="{{ item.disabled || item.loading || (canIUseGetUserProfile && item.openType === 'getUserInfo') ? '' : item.openType }}"
31 + style="{{ item.color ? 'color: ' + item.color : '' }}"
32 + class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }} {{ item.className || '' }}"
33 + hover-class="van-action-sheet__item--hover"
34 + data-index="{{ index }}"
35 + bindtap="{{ item.disabled || item.loading ? '' : 'onSelect' }}"
36 + bindgetuserinfo="onGetUserInfo"
37 + bindcontact="onContact"
38 + bindgetphonenumber="onGetPhoneNumber"
39 + binderror="onError"
40 + bindlaunchapp="onLaunchApp"
41 + bindopensetting="onOpenSetting"
42 + lang="{{ lang }}"
43 + session-from="{{ sessionFrom }}"
44 + send-message-title="{{ sendMessageTitle }}"
45 + send-message-path="{{ sendMessagePath }}"
46 + send-message-img="{{ sendMessageImg }}"
47 + show-message-card="{{ showMessageCard }}"
48 + app-parameter="{{ appParameter }}"
49 + >
50 + <block wx:if="{{ !item.loading }}">
51 + {{ item.name }}
52 + <view wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</view>
53 + </block>
54 + <van-loading wx:else custom-class="van-action-sheet__loading" size="22px" />
55 + </button>
56 + </view>
57 + <slot />
58 + <block wx:if="{{ cancelText }}">
59 + <view class="van-action-sheet__gap" />
60 + <view
61 + class="van-action-sheet__cancel"
62 + hover-class="van-action-sheet__cancel--hover"
63 + hover-stay-time="70"
64 + bind:tap="onCancel"
65 + >
66 + {{ cancelText }}
67 + </view>
68 + </block>
69 +</van-popup>
1 +@import '../common/index.wxss';.van-action-sheet{color:var(--action-sheet-item-text-color,#323233);max-height:var(--action-sheet-max-height,90%)!important}.van-action-sheet__cancel,.van-action-sheet__item{background-color:var(--action-sheet-item-background,#fff);font-size:var(--action-sheet-item-font-size,16px);line-height:var(--action-sheet-item-line-height,22px);padding:14px 16px;text-align:center}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5}.van-action-sheet__cancel:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,#646566)}.van-action-sheet__gap{background-color:var(--action-sheet-cancel-padding-color,#f7f8fa);display:block;height:var(--action-sheet-cancel-padding-top,8px)}.van-action-sheet__item--disabled{color:var(--action-sheet-item-disabled-text-color,#c8c9cc)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__subname{color:var(--action-sheet-subname-color,#969799);font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--font-weight-bold,500);line-height:var(--action-sheet-header-height,48px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,#969799);font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__close{color:var(--action-sheet-close-icon-color,#c8c9cc);font-size:var(--action-sheet-close-icon-size,22px)!important;line-height:inherit!important;padding:var(--action-sheet-close-icon-padding,0 16px);position:absolute!important;right:0;top:0}.van-action-sheet__loading{display:flex!important}
...\ No newline at end of file ...\ No newline at end of file
1 +import { VantComponent } from '../common/component';
2 +import { pickerProps } from '../picker/shared';
3 +import { requestAnimationFrame } from '../common/utils';
4 +const EMPTY_CODE = '000000';
5 +VantComponent({
6 + classes: ['active-class', 'toolbar-class', 'column-class'],
7 + props: Object.assign(Object.assign({}, pickerProps), { showToolbar: {
8 + type: Boolean,
9 + value: true,
10 + }, value: {
11 + type: String,
12 + observer(value) {
13 + this.code = value;
14 + this.setValues();
15 + },
16 + }, areaList: {
17 + type: Object,
18 + value: {},
19 + observer: 'setValues',
20 + }, columnsNum: {
21 + type: null,
22 + value: 3,
23 + }, columnsPlaceholder: {
24 + type: Array,
25 + observer(val) {
26 + this.setData({
27 + typeToColumnsPlaceholder: {
28 + province: val[0] || '',
29 + city: val[1] || '',
30 + county: val[2] || '',
31 + },
32 + });
33 + },
34 + } }),
35 + data: {
36 + columns: [{ values: [] }, { values: [] }, { values: [] }],
37 + typeToColumnsPlaceholder: {},
38 + },
39 + mounted() {
40 + requestAnimationFrame(() => {
41 + this.setValues();
42 + });
43 + },
44 + methods: {
45 + getPicker() {
46 + if (this.picker == null) {
47 + this.picker = this.selectComponent('.van-area__picker');
48 + }
49 + return this.picker;
50 + },
51 + onCancel(event) {
52 + this.emit('cancel', event.detail);
53 + },
54 + onConfirm(event) {
55 + const { index } = event.detail;
56 + let { value } = event.detail;
57 + value = this.parseValues(value);
58 + this.emit('confirm', { value, index });
59 + },
60 + emit(type, detail) {
61 + detail.values = detail.value;
62 + delete detail.value;
63 + this.$emit(type, detail);
64 + },
65 + parseValues(values) {
66 + const { columnsPlaceholder } = this.data;
67 + return values.map((value, index) => {
68 + if (value &&
69 + (!value.code || value.name === columnsPlaceholder[index])) {
70 + return Object.assign(Object.assign({}, value), { code: '', name: '' });
71 + }
72 + return value;
73 + });
74 + },
75 + onChange(event) {
76 + var _a;
77 + const { index, picker, value } = event.detail;
78 + this.code = value[index].code;
79 + (_a = this.setValues()) === null || _a === void 0 ? void 0 : _a.then(() => {
80 + this.$emit('change', {
81 + picker,
82 + values: this.parseValues(picker.getValues()),
83 + index,
84 + });
85 + });
86 + },
87 + getConfig(type) {
88 + const { areaList } = this.data;
89 + return (areaList && areaList[`${type}_list`]) || {};
90 + },
91 + getList(type, code) {
92 + if (type !== 'province' && !code) {
93 + return [];
94 + }
95 + const { typeToColumnsPlaceholder } = this.data;
96 + const list = this.getConfig(type);
97 + let result = Object.keys(list).map((code) => ({
98 + code,
99 + name: list[code],
100 + }));
101 + if (code != null) {
102 + // oversea code
103 + if (code[0] === '9' && type === 'city') {
104 + code = '9';
105 + }
106 + result = result.filter((item) => item.code.indexOf(code) === 0);
107 + }
108 + if (typeToColumnsPlaceholder[type] && result.length) {
109 + // set columns placeholder
110 + const codeFill = type === 'province'
111 + ? ''
112 + : type === 'city'
113 + ? EMPTY_CODE.slice(2, 4)
114 + : EMPTY_CODE.slice(4, 6);
115 + result.unshift({
116 + code: `${code}${codeFill}`,
117 + name: typeToColumnsPlaceholder[type],
118 + });
119 + }
120 + return result;
121 + },
122 + getIndex(type, code) {
123 + let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
124 + const list = this.getList(type, code.slice(0, compareNum - 2));
125 + // oversea code
126 + if (code[0] === '9' && type === 'province') {
127 + compareNum = 1;
128 + }
129 + code = code.slice(0, compareNum);
130 + for (let i = 0; i < list.length; i++) {
131 + if (list[i].code.slice(0, compareNum) === code) {
132 + return i;
133 + }
134 + }
135 + return 0;
136 + },
137 + setValues() {
138 + const picker = this.getPicker();
139 + if (!picker) {
140 + return;
141 + }
142 + let code = this.code || this.getDefaultCode();
143 + const provinceList = this.getList('province');
144 + const cityList = this.getList('city', code.slice(0, 2));
145 + const stack = [];
146 + const indexes = [];
147 + const { columnsNum } = this.data;
148 + if (columnsNum >= 1) {
149 + stack.push(picker.setColumnValues(0, provinceList, false));
150 + indexes.push(this.getIndex('province', code));
151 + }
152 + if (columnsNum >= 2) {
153 + stack.push(picker.setColumnValues(1, cityList, false));
154 + indexes.push(this.getIndex('city', code));
155 + if (cityList.length && code.slice(2, 4) === '00') {
156 + [{ code }] = cityList;
157 + }
158 + }
159 + if (columnsNum === 3) {
160 + stack.push(picker.setColumnValues(2, this.getList('county', code.slice(0, 4)), false));
161 + indexes.push(this.getIndex('county', code));
162 + }
163 + return Promise.all(stack)
164 + .catch(() => { })
165 + .then(() => picker.setIndexes(indexes))
166 + .catch(() => { });
167 + },
168 + getDefaultCode() {
169 + const { columnsPlaceholder } = this.data;
170 + if (columnsPlaceholder.length) {
171 + return EMPTY_CODE;
172 + }
173 + const countyCodes = Object.keys(this.getConfig('county'));
174 + if (countyCodes[0]) {
175 + return countyCodes[0];
176 + }
177 + const cityCodes = Object.keys(this.getConfig('city'));
178 + if (cityCodes[0]) {
179 + return cityCodes[0];
180 + }
181 + return '';
182 + },
183 + getValues() {
184 + const picker = this.getPicker();
185 + if (!picker) {
186 + return [];
187 + }
188 + return this.parseValues(picker.getValues().filter((value) => !!value));
189 + },
190 + getDetail() {
191 + const values = this.getValues();
192 + const area = {
193 + code: '',
194 + country: '',
195 + province: '',
196 + city: '',
197 + county: '',
198 + };
199 + if (!values.length) {
200 + return area;
201 + }
202 + const names = values.map((item) => item.name);
203 + area.code = values[values.length - 1].code;
204 + if (area.code[0] === '9') {
205 + area.country = names[1] || '';
206 + area.province = names[2] || '';
207 + }
208 + else {
209 + area.province = names[0] || '';
210 + area.city = names[1] || '';
211 + area.county = names[2] || '';
212 + }
213 + return area;
214 + },
215 + reset(code) {
216 + this.code = code || '';
217 + return this.setValues();
218 + },
219 + },
220 +});
1 +{
2 + "component": true,
3 + "usingComponents": {
4 + "van-picker": "../picker/index"
5 + }
6 +}
1 +<wxs src="./index.wxs" module="computed" />
2 +
3 +<van-picker
4 + class="van-area__picker"
5 + active-class="active-class"
6 + toolbar-class="toolbar-class"
7 + column-class="column-class"
8 + show-toolbar="{{ showToolbar }}"
9 + value-key="name"
10 + title="{{ title }}"
11 + loading="{{ loading }}"
12 + columns="{{ computed.displayColumns(columns, columnsNum) }}"
13 + item-height="{{ itemHeight }}"
14 + visible-item-count="{{ visibleItemCount }}"
15 + cancel-button-text="{{ cancelButtonText }}"
16 + confirm-button-text="{{ confirmButtonText }}"
17 + bind:change="onChange"
18 + bind:confirm="onConfirm"
19 + bind:cancel="onCancel"
20 +/>
1 +/* eslint-disable */
2 +function displayColumns(columns, columnsNum) {
3 + return columns.slice(0, +columnsNum);
4 +}
5 +
6 +module.exports = {
7 + displayColumns: displayColumns,
8 +};
1 +@import '../common/index.wxss';
...\ No newline at end of file ...\ No newline at end of file
1 +import { VantComponent } from '../common/component';
2 +import { button } from '../mixins/button';
3 +import { canIUseFormFieldButton } from '../common/version';
4 +const mixins = [button];
5 +if (canIUseFormFieldButton()) {
6 + mixins.push('wx://form-field-button');
7 +}
8 +VantComponent({
9 + mixins,
10 + classes: ['hover-class', 'loading-class'],
11 + data: {
12 + baseStyle: '',
13 + },
14 + props: {
15 + formType: String,
16 + icon: String,
17 + classPrefix: {
18 + type: String,
19 + value: 'van-icon',
20 + },
21 + plain: Boolean,
22 + block: Boolean,
23 + round: Boolean,
24 + square: Boolean,
25 + loading: Boolean,
26 + hairline: Boolean,
27 + disabled: Boolean,
28 + loadingText: String,
29 + customStyle: String,
30 + loadingType: {
31 + type: String,
32 + value: 'circular',
33 + },
34 + type: {
35 + type: String,
36 + value: 'default',
37 + },
38 + dataset: null,
39 + size: {
40 + type: String,
41 + value: 'normal',
42 + },
43 + loadingSize: {
44 + type: String,
45 + value: '20px',
46 + },
47 + color: String,
48 + },
49 + methods: {
50 + onClick(event) {
51 + this.$emit('click', event);
52 + const { canIUseGetUserProfile, openType, getUserProfileDesc, lang, } = this.data;
53 + if (openType === 'getUserInfo' && canIUseGetUserProfile) {
54 + wx.getUserProfile({
55 + desc: getUserProfileDesc || ' ',
56 + lang: lang || 'en',
57 + complete: (userProfile) => {
58 + this.$emit('getuserinfo', userProfile);
59 + },
60 + });
61 + }
62 + },
63 + },
64 +});
1 +{
2 + "component": true,
3 + "usingComponents": {
4 + "van-icon": "../icon/index",
5 + "van-loading": "../loading/index"
6 + }
7 +}
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +<wxs src="./index.wxs" module="computed" />
3 +
4 +<button
5 + id="{{ id }}"
6 + data-detail="{{ dataset }}"
7 + class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
8 + hover-class="van-button--active hover-class"
9 + lang="{{ lang }}"
10 + form-type="{{ formType }}"
11 + style="{{ computed.rootStyle({ plain, color, customStyle }) }}"
12 + open-type="{{ disabled || loading || (canIUseGetUserProfile && openType === 'getUserInfo') ? '' : openType }}"
13 + business-id="{{ businessId }}"
14 + session-from="{{ sessionFrom }}"
15 + send-message-title="{{ sendMessageTitle }}"
16 + send-message-path="{{ sendMessagePath }}"
17 + send-message-img="{{ sendMessageImg }}"
18 + show-message-card="{{ showMessageCard }}"
19 + app-parameter="{{ appParameter }}"
20 + aria-label="{{ ariaLabel }}"
21 + bindtap="{{ disabled || loading ? '' : 'onClick' }}"
22 + bindgetuserinfo="onGetUserInfo"
23 + bindcontact="onContact"
24 + bindgetphonenumber="onGetPhoneNumber"
25 + binderror="onError"
26 + bindlaunchapp="onLaunchApp"
27 + bindopensetting="onOpenSetting"
28 +>
29 + <block wx:if="{{ loading }}">
30 + <van-loading
31 + custom-class="loading-class"
32 + size="{{ loadingSize }}"
33 + type="{{ loadingType }}"
34 + color="{{ computed.loadingColor({ type, color, plain }) }}"
35 + />
36 + <view wx:if="{{ loadingText }}" class="van-button__loading-text">
37 + {{ loadingText }}
38 + </view>
39 + </block>
40 + <block wx:else>
41 + <van-icon
42 + wx:if="{{ icon }}"
43 + size="1.2em"
44 + name="{{ icon }}"
45 + class-prefix="{{ classPrefix }}"
46 + class="van-button__icon"
47 + custom-style="line-height: inherit;"
48 + />
49 + <view class="van-button__text">
50 + <slot />
51 + </view>
52 + </block>
53 +</button>
1 +/* eslint-disable */
2 +var style = require('../wxs/style.wxs');
3 +
4 +function rootStyle(data) {
5 + if (!data.color) {
6 + return data.customStyle;
7 + }
8 +
9 + var properties = {
10 + color: data.plain ? data.color : '#fff',
11 + background: data.plain ? null : data.color,
12 + };
13 +
14 + // hide border when color is linear-gradient
15 + if (data.color.indexOf('gradient') !== -1) {
16 + properties.border = 0;
17 + } else {
18 + properties['border-color'] = data.color;
19 + }
20 +
21 + return style([properties, data.customStyle]);
22 +}
23 +
24 +function loadingColor(data) {
25 + if (data.plain) {
26 + return data.color ? data.color : '#c9c9c9';
27 + }
28 +
29 + if (data.type === 'default') {
30 + return '#c9c9c9';
31 + }
32 +
33 + return '#fff';
34 +}
35 +
36 +module.exports = {
37 + rootStyle: rootStyle,
38 + loadingColor: loadingColor,
39 +};
1 +@import '../common/index.wxss';.van-button{-webkit-text-size-adjust:100%;align-items:center;-webkit-appearance:none;border-radius:var(--button-border-radius,2px);box-sizing:border-box;display:inline-flex;font-size:var(--button-default-font-size,16px);height:var(--button-default-height,44px);justify-content:center;line-height:var(--button-line-height,20px);padding:0;position:relative;text-align:center;transition:opacity .2s;vertical-align:middle}.van-button:before{background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:" ";height:100%;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{background:var(--button-default-background-color,#fff);border:var(--button-border-width,1px) solid var(--button-default-border-color,#ebedf0);color:var(--button-default-color,#323233)}.van-button--primary{background:var(--button-primary-background-color,#07c160);border:var(--button-border-width,1px) solid var(--button-primary-border-color,#07c160);color:var(--button-primary-color,#fff)}.van-button--info{background:var(--button-info-background-color,#1989fa);border:var(--button-border-width,1px) solid var(--button-info-border-color,#1989fa);color:var(--button-info-color,#fff)}.van-button--danger{background:var(--button-danger-background-color,#ee0a24);border:var(--button-border-width,1px) solid var(--button-danger-border-color,#ee0a24);color:var(--button-danger-color,#fff)}.van-button--warning{background:var(--button-warning-background-color,#ff976a);border:var(--button-border-width,1px) solid var(--button-warning-border-color,#ff976a);color:var(--button-warning-color,#fff)}.van-button--plain{background:var(--button-plain-background-color,#fff)}.van-button--plain.van-button--primary{color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:var(--button-warning-background-color,#ff976a)}.van-button--large{height:var(--button-large-height,50px);width:100%}.van-button--normal{font-size:var(--button-normal-font-size,14px);padding:0 15px}.van-button--small{font-size:var(--button-small-font-size,12px);height:var(--button-small-height,30px);min-width:var(--button-small-min-width,60px);padding:0 var(--padding-xs,8px)}.van-button--mini{display:inline-block;font-size:var(--button-mini-font-size,10px);height:var(--button-mini-height,22px);min-width:var(--button-mini-min-width,50px)}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:flex;width:100%}.van-button--round{border-radius:var(--button-round-border-radius,999px)}.van-button--square{border-radius:0}.van-button--disabled{opacity:var(--button-disabled-opacity,.5)}.van-button__text{display:inline}.van-button__icon+.van-button__text:not(:empty),.van-button__loading-text{margin-left:4px}.van-button__icon{line-height:inherit!important;min-width:1em;vertical-align:top}.van-button--hairline{border-width:0;padding-top:1px}.van-button--hairline:after{border-color:inherit;border-radius:calc(var(--button-border-radius, 2px)*2);border-width:1px}.van-button--hairline.van-button--round:after{border-radius:var(--button-round-border-radius,999px)}.van-button--hairline.van-button--square:after{border-radius:0}
...\ No newline at end of file ...\ No newline at end of file
1 +<view class="van-calendar">
2 + <header
3 + title="{{ title }}"
4 + showTitle="{{ showTitle }}"
5 + subtitle="{{ subtitle }}"
6 + showSubtitle="{{ showSubtitle }}"
7 + firstDayOfWeek="{{ firstDayOfWeek }}"
8 + bind:click-subtitle="onClickSubtitle"
9 + >
10 + <slot name="title" slot="title"></slot>
11 + </header>
12 +
13 + <scroll-view
14 + class="van-calendar__body"
15 + scroll-y
16 + scroll-into-view="{{ scrollIntoView }}"
17 + >
18 + <month
19 + wx:for="{{ computed.getMonths(minDate, maxDate) }}"
20 + wx:key="index"
21 + id="month{{ index }}"
22 + class="month"
23 + data-date="{{ item }}"
24 + date="{{ item }}"
25 + type="{{ type }}"
26 + color="{{ color }}"
27 + minDate="{{ minDate }}"
28 + maxDate="{{ maxDate }}"
29 + showMark="{{ showMark }}"
30 + formatter="{{ formatter }}"
31 + rowHeight="{{ rowHeight }}"
32 + currentDate="{{ currentDate }}"
33 + showSubtitle="{{ showSubtitle }}"
34 + allowSameDay="{{ allowSameDay }}"
35 + showMonthTitle="{{ index !== 0 || !showSubtitle }}"
36 + firstDayOfWeek="{{ firstDayOfWeek }}"
37 + bind:click="onClickDay"
38 + />
39 + </scroll-view>
40 +
41 + <view
42 + class="{{ utils.bem('calendar__footer', { safeAreaInsetBottom }) }}"
43 + >
44 + <slot name="footer"></slot>
45 + </view>
46 +
47 + <view
48 + class="{{ utils.bem('calendar__footer', { safeAreaInsetBottom }) }}"
49 + >
50 + <van-button
51 + wx:if="{{ showConfirm }}"
52 + round
53 + block
54 + type="danger"
55 + color="{{ color }}"
56 + custom-class="van-calendar__confirm"
57 + disabled="{{ computed.getButtonDisabled(type, currentDate) }}"
58 + nativeType="text"
59 + bind:click="onConfirm"
60 + >
61 + {{
62 + computed.getButtonDisabled(type, currentDate)
63 + ? confirmDisabledText
64 + : confirmText
65 + }}
66 + </van-button>
67 + </view>
68 +</view>
1 +import { VantComponent } from '../../../common/component';
2 +VantComponent({
3 + props: {
4 + title: {
5 + type: String,
6 + value: 'ๆ—ฅๆœŸ้€‰ๆ‹ฉ',
7 + },
8 + subtitle: String,
9 + showTitle: Boolean,
10 + showSubtitle: Boolean,
11 + firstDayOfWeek: {
12 + type: Number,
13 + observer: 'initWeekDay',
14 + },
15 + },
16 + data: {
17 + weekdays: [],
18 + },
19 + created() {
20 + this.initWeekDay();
21 + },
22 + methods: {
23 + initWeekDay() {
24 + const defaultWeeks = ['ๆ—ฅ', 'ไธ€', 'ไบŒ', 'ไธ‰', 'ๅ››', 'ไบ”', 'ๅ…ญ'];
25 + const firstDayOfWeek = this.data.firstDayOfWeek || 0;
26 + this.setData({
27 + weekdays: [
28 + ...defaultWeeks.slice(firstDayOfWeek, 7),
29 + ...defaultWeeks.slice(0, firstDayOfWeek),
30 + ],
31 + });
32 + },
33 + onClickSubtitle(event) {
34 + this.$emit('click-subtitle', event);
35 + },
36 + },
37 +});
1 +<view class="van-calendar__header">
2 + <block wx:if="{{ showTitle }}">
3 + <view class="van-calendar__header-title"><slot name="title"></slot></view>
4 + <view class="van-calendar__header-title">{{ title }}</view>
5 + </block>
6 +
7 + <view wx:if="{{ showSubtitle }}" class="van-calendar__header-subtitle" bind:tap="onClickSubtitle">
8 + {{ subtitle }}
9 + </view>
10 +
11 + <view class="van-calendar__weekdays">
12 + <view wx:for="{{ weekdays }}" wx:key="index" class="van-calendar__weekday">
13 + {{ item }}
14 + </view>
15 + </view>
16 +</view>
1 +@import '../../../common/index.wxss';.van-calendar__header{box-shadow:var(--calendar-header-box-shadow,0 2px 10px hsla(220,1%,50%,.16));flex-shrink:0}.van-calendar__header-subtitle,.van-calendar__header-title{font-weight:var(--font-weight-bold,500);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.van-calendar__header-title+.van-calendar__header-title,.van-calendar__header-title:empty{display:none}.van-calendar__header-title:empty+.van-calendar__header-title{display:block!important}.van-calendar__weekdays{display:flex}.van-calendar__weekday{flex:1;font-size:var(--calendar-weekdays-font-size,12px);line-height:var(--calendar-weekdays-height,30px);text-align:center}
...\ No newline at end of file ...\ No newline at end of file
1 +export interface Day {
2 + date: Date;
3 + type: string;
4 + text: number;
5 + bottomInfo?: string;
6 +}
1 +import { VantComponent } from '../../../common/component';
2 +import { getMonthEndDay, compareDay, getPrevDay, getNextDay, } from '../../utils';
3 +VantComponent({
4 + props: {
5 + date: {
6 + type: null,
7 + observer: 'setDays',
8 + },
9 + type: {
10 + type: String,
11 + observer: 'setDays',
12 + },
13 + color: String,
14 + minDate: {
15 + type: null,
16 + observer: 'setDays',
17 + },
18 + maxDate: {
19 + type: null,
20 + observer: 'setDays',
21 + },
22 + showMark: Boolean,
23 + rowHeight: null,
24 + formatter: {
25 + type: null,
26 + observer: 'setDays',
27 + },
28 + currentDate: {
29 + type: null,
30 + observer: 'setDays',
31 + },
32 + firstDayOfWeek: {
33 + type: Number,
34 + observer: 'setDays',
35 + },
36 + allowSameDay: Boolean,
37 + showSubtitle: Boolean,
38 + showMonthTitle: Boolean,
39 + },
40 + data: {
41 + visible: true,
42 + days: [],
43 + },
44 + methods: {
45 + onClick(event) {
46 + const { index } = event.currentTarget.dataset;
47 + const item = this.data.days[index];
48 + if (item.type !== 'disabled') {
49 + this.$emit('click', item);
50 + }
51 + },
52 + setDays() {
53 + const days = [];
54 + const startDate = new Date(this.data.date);
55 + const year = startDate.getFullYear();
56 + const month = startDate.getMonth();
57 + const totalDay = getMonthEndDay(startDate.getFullYear(), startDate.getMonth() + 1);
58 + for (let day = 1; day <= totalDay; day++) {
59 + const date = new Date(year, month, day);
60 + const type = this.getDayType(date);
61 + let config = {
62 + date,
63 + type,
64 + text: day,
65 + bottomInfo: this.getBottomInfo(type),
66 + };
67 + if (this.data.formatter) {
68 + config = this.data.formatter(config);
69 + }
70 + days.push(config);
71 + }
72 + this.setData({ days });
73 + },
74 + getMultipleDayType(day) {
75 + const { currentDate } = this.data;
76 + if (!Array.isArray(currentDate)) {
77 + return '';
78 + }
79 + const isSelected = (date) => currentDate.some((item) => compareDay(item, date) === 0);
80 + if (isSelected(day)) {
81 + const prevDay = getPrevDay(day);
82 + const nextDay = getNextDay(day);
83 + const prevSelected = isSelected(prevDay);
84 + const nextSelected = isSelected(nextDay);
85 + if (prevSelected && nextSelected) {
86 + return 'multiple-middle';
87 + }
88 + if (prevSelected) {
89 + return 'end';
90 + }
91 + return nextSelected ? 'start' : 'multiple-selected';
92 + }
93 + return '';
94 + },
95 + getRangeDayType(day) {
96 + const { currentDate, allowSameDay } = this.data;
97 + if (!Array.isArray(currentDate)) {
98 + return '';
99 + }
100 + const [startDay, endDay] = currentDate;
101 + if (!startDay) {
102 + return '';
103 + }
104 + const compareToStart = compareDay(day, startDay);
105 + if (!endDay) {
106 + return compareToStart === 0 ? 'start' : '';
107 + }
108 + const compareToEnd = compareDay(day, endDay);
109 + if (compareToStart === 0 && compareToEnd === 0 && allowSameDay) {
110 + return 'start-end';
111 + }
112 + if (compareToStart === 0) {
113 + return 'start';
114 + }
115 + if (compareToEnd === 0) {
116 + return 'end';
117 + }
118 + if (compareToStart > 0 && compareToEnd < 0) {
119 + return 'middle';
120 + }
121 + return '';
122 + },
123 + getDayType(day) {
124 + const { type, minDate, maxDate, currentDate } = this.data;
125 + if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
126 + return 'disabled';
127 + }
128 + if (type === 'single') {
129 + return compareDay(day, currentDate) === 0 ? 'selected' : '';
130 + }
131 + if (type === 'multiple') {
132 + return this.getMultipleDayType(day);
133 + }
134 + /* istanbul ignore else */
135 + if (type === 'range') {
136 + return this.getRangeDayType(day);
137 + }
138 + return '';
139 + },
140 + getBottomInfo(type) {
141 + if (this.data.type === 'range') {
142 + if (type === 'start') {
143 + return 'ๅผ€ๅง‹';
144 + }
145 + if (type === 'end') {
146 + return '็ป“ๆŸ';
147 + }
148 + if (type === 'start-end') {
149 + return 'ๅผ€ๅง‹/็ป“ๆŸ';
150 + }
151 + }
152 + },
153 + },
154 +});
1 +<wxs src="./index.wxs" module="computed"></wxs>
2 +<wxs src="../../../wxs/utils.wxs" module="utils" />
3 +
4 +<view class="van-calendar__month" style="{{ computed.getMonthStyle(visible, date, rowHeight) }}">
5 + <view wx:if="{{ showMonthTitle }}" class="van-calendar__month-title">
6 + {{ computed.formatMonthTitle(date) }}
7 + </view>
8 +
9 + <view wx:if="{{ visible }}" class="van-calendar__days">
10 + <view wx:if="{{ showMark }}" class="van-calendar__month-mark">
11 + {{ computed.getMark(date) }}
12 + </view>
13 +
14 + <view
15 + wx:for="{{ days }}"
16 + wx:key="index"
17 + style="{{ computed.getDayStyle(item.type, index, date, rowHeight, color, firstDayOfWeek) }}"
18 + class="{{ utils.bem('calendar__day', [item.type]) }} {{ item.className }}"
19 + data-index="{{ index }}"
20 + bindtap="onClick"
21 + >
22 + <view wx:if="{{ item.type === 'selected' }}" class="van-calendar__selected-day" style="width: {{ rowHeight }}px; height: {{ rowHeight }}px; background: {{ color }}">
23 + <view wx:if="{{ item.topInfo }}" class="van-calendar__top-info">{{ item.topInfo }}</view>
24 + {{ item.text }}
25 + <view wx:if="{{ item.bottomInfo }}" class="van-calendar__bottom-info">
26 + {{ item.bottomInfo }}
27 + </view>
28 + </view>
29 +
30 + <view wx:else>
31 + <view wx:if="{{ item.topInfo }}" class="van-calendar__top-info">{{ item.topInfo }}</view>
32 + {{ item.text }}
33 + <view wx:if="{{ item.bottomInfo }}" class="van-calendar__bottom-info">
34 + {{ item.bottomInfo }}
35 + </view>
36 + </view>
37 + </view>
38 + </view>
39 +</view>
1 +/* eslint-disable */
2 +var utils = require('../../utils.wxs');
3 +
4 +function getMark(date) {
5 + return getDate(date).getMonth() + 1;
6 +}
7 +
8 +var ROW_HEIGHT = 64;
9 +
10 +function getDayStyle(type, index, date, rowHeight, color, firstDayOfWeek) {
11 + var style = [];
12 + var current = getDate(date).getDay() || 7;
13 + var offset = current < firstDayOfWeek ? (7 - firstDayOfWeek + current) :
14 + current === 7 && firstDayOfWeek === 0 ? 0 :
15 + (current - firstDayOfWeek);
16 +
17 + if (index === 0) {
18 + style.push(['margin-left', (100 * offset) / 7 + '%']);
19 + }
20 +
21 + if (rowHeight !== ROW_HEIGHT) {
22 + style.push(['height', rowHeight + 'px']);
23 + }
24 +
25 + if (color) {
26 + if (
27 + type === 'start' ||
28 + type === 'end' ||
29 + type === 'start-end' ||
30 + type === 'multiple-selected' ||
31 + type === 'multiple-middle'
32 + ) {
33 + style.push(['background', color]);
34 + } else if (type === 'middle') {
35 + style.push(['color', color]);
36 + }
37 + }
38 +
39 + return style
40 + .map(function(item) {
41 + return item.join(':');
42 + })
43 + .join(';');
44 +}
45 +
46 +function formatMonthTitle(date) {
47 + date = getDate(date);
48 + return date.getFullYear() + 'ๅนด' + (date.getMonth() + 1) + 'ๆœˆ';
49 +}
50 +
51 +function getMonthStyle(visible, date, rowHeight) {
52 + if (!visible) {
53 + date = getDate(date);
54 +
55 + var totalDay = utils.getMonthEndDay(
56 + date.getFullYear(),
57 + date.getMonth() + 1
58 + );
59 + var offset = getDate(date).getDay();
60 + var padding = Math.ceil((totalDay + offset) / 7) * rowHeight;
61 +
62 + return 'padding-bottom:' + padding + 'px';
63 + }
64 +}
65 +
66 +module.exports = {
67 + getMark: getMark,
68 + getDayStyle: getDayStyle,
69 + formatMonthTitle: formatMonthTitle,
70 + getMonthStyle: getMonthStyle
71 +};
1 +@import '../../../common/index.wxss';.van-calendar{background-color:var(--calendar-background-color,#fff);display:flex;flex-direction:column;height:100%}.van-calendar__month-title{font-size:var(--calendar-month-title-font-size,14px);font-weight:var(--font-weight-bold,500);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.van-calendar__days{display:flex;flex-wrap:wrap;position:relative;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{color:var(--calendar-month-mark-color,rgba(242,243,245,.8));font-size:var(--calendar-month-mark-font-size,160px);left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:0}.van-calendar__day,.van-calendar__selected-day{align-items:center;display:flex;justify-content:center;text-align:center}.van-calendar__day{font-size:var(--calendar-day-font-size,16px);height:var(--calendar-day-height,64px);position:relative;width:14.285%}.van-calendar__day--end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected,.van-calendar__day--start,.van-calendar__day--start-end{background-color:var(--calendar-range-edge-background-color,#ee0a24);color:var(--calendar-range-edge-color,#fff)}.van-calendar__day--start{border-radius:4px 0 0 4px}.van-calendar__day--end{border-radius:0 4px 4px 0}.van-calendar__day--multiple-selected,.van-calendar__day--start-end{border-radius:4px}.van-calendar__day--middle{color:var(--calendar-range-middle-color,#ee0a24)}.van-calendar__day--middle:after{background-color:currentColor;bottom:0;content:"";left:0;opacity:var(--calendar-range-middle-background-opacity,.1);position:absolute;right:0;top:0}.van-calendar__day--disabled{color:var(--calendar-day-disabled-color,#c8c9cc);cursor:default}.van-calendar__bottom-info,.van-calendar__top-info{font-size:var(--calendar-info-font-size,10px);left:0;line-height:var(--calendar-info-line-height,14px);position:absolute;right:0}@media (max-width:350px){.van-calendar__bottom-info,.van-calendar__top-info{font-size:9px}}.van-calendar__top-info{top:6px}.van-calendar__bottom-info{bottom:6px}.van-calendar__selected-day{background-color:var(--calendar-selected-day-background-color,#ee0a24);border-radius:4px;color:var(--calendar-selected-day-color,#fff);height:var(--calendar-selected-day-size,54px);width:var(--calendar-selected-day-size,54px)}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 +{
2 + "component": true,
3 + "usingComponents": {
4 + "header": "./components/header/index",
5 + "month": "./components/month/index",
6 + "van-button": "../button/index",
7 + "van-popup": "../popup/index",
8 + "van-toast": "../toast/index"
9 + }
10 +}
1 +<wxs src="./index.wxs" module="computed" />
2 +<wxs src="../wxs/utils.wxs" module="utils" />
3 +
4 +<import src="./calendar.wxml" />
5 +
6 +<van-popup
7 + wx:if="{{ poppable }}"
8 + custom-class="van-calendar__popup--{{ position }}"
9 + close-icon-class="van-calendar__close-icon"
10 + show="{{ show }}"
11 + round="{{ round }}"
12 + position="{{ position }}"
13 + closeable="{{ showTitle || showSubtitle }}"
14 + close-on-click-overlay="{{ closeOnClickOverlay }}"
15 + bind:enter="onOpen"
16 + bind:close="onClose"
17 + bind:after-enter="onOpened"
18 + bind:after-leave="onClosed"
19 +>
20 + <include src="./calendar.wxml" />
21 +</van-popup>
22 +
23 +<include wx:else src="./calendar.wxml" />
24 +
25 +<van-toast id="van-toast" />
1 +/* eslint-disable */
2 +var utils = require('./utils.wxs');
3 +
4 +function getMonths(minDate, maxDate) {
5 + var months = [];
6 + var cursor = getDate(minDate);
7 +
8 + cursor.setDate(1);
9 +
10 + do {
11 + months.push(cursor.getTime());
12 + cursor.setMonth(cursor.getMonth() + 1);
13 + } while (utils.compareMonth(cursor, getDate(maxDate)) !== 1);
14 +
15 + return months;
16 +}
17 +
18 +function getButtonDisabled(type, currentDate) {
19 + if (currentDate == null) {
20 + return true;
21 + }
22 +
23 + if (type === 'range') {
24 + return !currentDate[0] || !currentDate[1];
25 + }
26 +
27 + if (type === 'multiple') {
28 + return !currentDate.length;
29 + }
30 +
31 + return !currentDate;
32 +}
33 +
34 +module.exports = {
35 + getMonths: getMonths,
36 + getButtonDisabled: getButtonDisabled
37 +};
1 +@import '../common/index.wxss';.van-calendar{background-color:var(--calendar-background-color,#fff);display:flex;flex-direction:column;height:var(--calendar-height,100%)}.van-calendar__close-icon{top:11px}.van-calendar__popup--bottom,.van-calendar__popup--top{height:var(--calendar-popup-height,80%)}.van-calendar__popup--left,.van-calendar__popup--right{height:100%}.van-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.van-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.van-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.van-calendar__footer+.van-calendar__footer,.van-calendar__footer:empty{display:none}.van-calendar__footer:empty+.van-calendar__footer{display:block!important}.van-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
...\ No newline at end of file ...\ No newline at end of file
1 +export declare const ROW_HEIGHT = 64;
2 +export declare function formatMonthTitle(date: Date): string;
3 +export declare function compareMonth(date1: Date | number, date2: Date | number): 1 | -1 | 0;
4 +export declare function compareDay(day1: Date | number, day2: Date | number): 1 | -1 | 0;
5 +export declare function getDayByOffset(date: Date, offset: number): Date;
6 +export declare function getPrevDay(date: Date): Date;
7 +export declare function getNextDay(date: Date): Date;
8 +export declare function getToday(): Date;
9 +export declare function calcDateNum(date: [Date, Date]): number;
10 +export declare function copyDates(dates: Date | Date[]): Date | Date[];
11 +export declare function getMonthEndDay(year: number, month: number): number;
12 +export declare function getMonths(minDate: number, maxDate: number): number[];
1 +export const ROW_HEIGHT = 64;
2 +export function formatMonthTitle(date) {
3 + if (!(date instanceof Date)) {
4 + date = new Date(date);
5 + }
6 + return `${date.getFullYear()}ๅนด${date.getMonth() + 1}ๆœˆ`;
7 +}
8 +export function compareMonth(date1, date2) {
9 + if (!(date1 instanceof Date)) {
10 + date1 = new Date(date1);
11 + }
12 + if (!(date2 instanceof Date)) {
13 + date2 = new Date(date2);
14 + }
15 + const year1 = date1.getFullYear();
16 + const year2 = date2.getFullYear();
17 + const month1 = date1.getMonth();
18 + const month2 = date2.getMonth();
19 + if (year1 === year2) {
20 + return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
21 + }
22 + return year1 > year2 ? 1 : -1;
23 +}
24 +export function compareDay(day1, day2) {
25 + if (!(day1 instanceof Date)) {
26 + day1 = new Date(day1);
27 + }
28 + if (!(day2 instanceof Date)) {
29 + day2 = new Date(day2);
30 + }
31 + const compareMonthResult = compareMonth(day1, day2);
32 + if (compareMonthResult === 0) {
33 + const date1 = day1.getDate();
34 + const date2 = day2.getDate();
35 + return date1 === date2 ? 0 : date1 > date2 ? 1 : -1;
36 + }
37 + return compareMonthResult;
38 +}
39 +export function getDayByOffset(date, offset) {
40 + date = new Date(date);
41 + date.setDate(date.getDate() + offset);
42 + return date;
43 +}
44 +export function getPrevDay(date) {
45 + return getDayByOffset(date, -1);
46 +}
47 +export function getNextDay(date) {
48 + return getDayByOffset(date, 1);
49 +}
50 +export function getToday() {
51 + const today = new Date();
52 + today.setHours(0, 0, 0, 0);
53 + return today;
54 +}
55 +export function calcDateNum(date) {
56 + const day1 = new Date(date[0]).getTime();
57 + const day2 = new Date(date[1]).getTime();
58 + return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
59 +}
60 +export function copyDates(dates) {
61 + if (Array.isArray(dates)) {
62 + return dates.map((date) => {
63 + if (date === null) {
64 + return date;
65 + }
66 + return new Date(date);
67 + });
68 + }
69 + return new Date(dates);
70 +}
71 +export function getMonthEndDay(year, month) {
72 + return 32 - new Date(year, month - 1, 32).getDate();
73 +}
74 +export function getMonths(minDate, maxDate) {
75 + const months = [];
76 + const cursor = new Date(minDate);
77 + cursor.setDate(1);
78 + do {
79 + months.push(cursor.getTime());
80 + cursor.setMonth(cursor.getMonth() + 1);
81 + } while (compareMonth(cursor, maxDate) !== 1);
82 + return months;
83 +}
1 +/* eslint-disable */
2 +function getMonthEndDay(year, month) {
3 + return 32 - getDate(year, month - 1, 32).getDate();
4 +}
5 +
6 +function compareMonth(date1, date2) {
7 + date1 = getDate(date1);
8 + date2 = getDate(date2);
9 +
10 + var year1 = date1.getFullYear();
11 + var year2 = date2.getFullYear();
12 + var month1 = date1.getMonth();
13 + var month2 = date2.getMonth();
14 +
15 + if (year1 === year2) {
16 + return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
17 + }
18 +
19 + return year1 > year2 ? 1 : -1;
20 +}
21 +
22 +module.exports = {
23 + getMonthEndDay: getMonthEndDay,
24 + compareMonth: compareMonth
25 +};
1 +import { link } from '../mixins/link';
2 +import { VantComponent } from '../common/component';
3 +VantComponent({
4 + classes: [
5 + 'num-class',
6 + 'desc-class',
7 + 'thumb-class',
8 + 'title-class',
9 + 'price-class',
10 + 'origin-price-class',
11 + ],
12 + mixins: [link],
13 + props: {
14 + tag: String,
15 + num: String,
16 + desc: String,
17 + thumb: String,
18 + title: String,
19 + price: {
20 + type: String,
21 + observer: 'updatePrice',
22 + },
23 + centered: Boolean,
24 + lazyLoad: Boolean,
25 + thumbLink: String,
26 + originPrice: String,
27 + thumbMode: {
28 + type: String,
29 + value: 'aspectFit',
30 + },
31 + currency: {
32 + type: String,
33 + value: 'ยฅ',
34 + },
35 + },
36 + methods: {
37 + updatePrice() {
38 + const { price } = this.data;
39 + const priceArr = price.toString().split('.');
40 + this.setData({
41 + integerStr: priceArr[0],
42 + decimalStr: priceArr[1] ? `.${priceArr[1]}` : '',
43 + });
44 + },
45 + onClickThumb() {
46 + this.jumpLink('thumbLink');
47 + },
48 + },
49 +});
1 +{
2 + "component": true,
3 + "usingComponents": {
4 + "van-tag": "../tag/index"
5 + }
6 +}
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +
3 +<view class="custom-class van-card">
4 + <view class="{{ utils.bem('card__header', { center: centered }) }}">
5 + <view class="van-card__thumb" bind:tap="onClickThumb">
6 + <image
7 + wx:if="{{ thumb }}"
8 + src="{{ thumb }}"
9 + mode="{{ thumbMode }}"
10 + lazy-load="{{ lazyLoad }}"
11 + class="van-card__img thumb-class"
12 + />
13 + <slot wx:else name="thumb" />
14 + <van-tag
15 + wx:if="{{ tag }}"
16 + mark
17 + type="danger"
18 + custom-class="van-card__tag"
19 + >
20 + {{ tag }}
21 + </van-tag>
22 + <slot wx:else name="tag" />
23 + </view>
24 +
25 + <view class="van-card__content {{ utils.bem('card__content', { center: centered }) }}">
26 + <view>
27 + <view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view>
28 + <slot wx:else name="title" />
29 +
30 + <view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>
31 + <slot wx:else name="desc" />
32 +
33 + <slot name="tags" />
34 + </view>
35 +
36 + <view class="van-card__bottom">
37 + <slot name="price-top" />
38 + <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">
39 + <text>{{ currency }}</text>
40 + <text class="van-card__price-integer">{{ integerStr }}</text>
41 + <text class="van-card__price-decimal">{{ decimalStr }}</text>
42 + </view>
43 + <slot wx:else name="price" />
44 + <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
45 + <slot wx:else name="origin-price" />
46 + <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
47 + <slot wx:else name="num" />
48 + <slot name="bottom" />
49 + </view>
50 + </view>
51 + </view>
52 +
53 + <view class="van-card__footer">
54 + <slot name="footer" />
55 + </view>
56 +</view>
1 +@import '../common/index.wxss';.van-card{background-color:var(--card-background-color,#fafafa);box-sizing:border-box;color:var(--card-text-color,#323233);font-size:var(--card-font-size,12px);padding:var(--card-padding,8px 16px);position:relative}.van-card__header{display:flex}.van-card__header--center{align-items:center;justify-content:center}.van-card__thumb{flex:none;height:var(--card-thumb-size,88px);margin-right:var(--padding-xs,8px);position:relative;width:var(--card-thumb-size,88px)}.van-card__thumb:empty{display:none}.van-card__img{border-radius:8px;height:100%;width:100%}.van-card__content{display:flex;flex:1;flex-direction:column;justify-content:space-between;min-height:var(--card-thumb-size,88px);min-width:0;position:relative}.van-card__content--center{justify-content:center}.van-card__desc,.van-card__title{word-wrap:break-word}.van-card__title{font-weight:700;line-height:var(--card-title-line-height,16px)}.van-card__desc{color:var(--card-desc-color,#646566);line-height:var(--card-desc-line-height,20px)}.van-card__bottom{line-height:20px}.van-card__price{color:var(--card-price-color,#ee0a24);display:inline-block;font-size:var(--card-price-font-size,12px);font-weight:700}.van-card__price-integer{font-size:var(--card-price-integer-font-size,16px)}.van-card__price-decimal,.van-card__price-integer{font-family:var(--card-price-font-family,Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif)}.van-card__origin-price{color:var(--card-origin-price-color,#646566);display:inline-block;font-size:var(--card-origin-price-font-size,10px);margin-left:5px;text-decoration:line-through}.van-card__num{float:right}.van-card__tag{left:0;position:absolute!important;top:2px}.van-card__footer{flex:none;text-align:right;width:100%}
...\ No newline at end of file ...\ No newline at end of file
1 +import { VantComponent } from '../common/component';
2 +VantComponent({
3 + props: {
4 + title: String,
5 + border: {
6 + type: Boolean,
7 + value: true,
8 + },
9 + inset: Boolean,
10 + },
11 +});
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +
3 +<view
4 + wx:if="{{ title }}"
5 + class="{{ utils.bem('cell-group__title', { inset }) }}"
6 +>
7 + {{ title }}
8 +</view>
9 +<view class="custom-class {{ utils.bem('cell-group', { inset }) }} {{ border ? 'van-hairline--top-bottom' : '' }}">
10 + <slot />
11 +</view>
1 +@import '../common/index.wxss';.van-cell-group--inset{border-radius:var(--cell-group-inset-border-radius,8px);margin:var(--cell-group-inset-padding,0 16px);overflow:hidden}.van-cell-group__title{color:var(--cell-group-title-color,#969799);font-size:var(--cell-group-title-font-size,14px);line-height:var(--cell-group-title-line-height,16px);padding:var(--cell-group-title-padding,16px 16px 8px)}.van-cell-group__title--inset{padding:var(--cell-group-inset-title-padding,16px 16px 8px 32px)}
...\ No newline at end of file ...\ No newline at end of file
1 +import { link } from '../mixins/link';
2 +import { VantComponent } from '../common/component';
3 +VantComponent({
4 + classes: [
5 + 'title-class',
6 + 'label-class',
7 + 'value-class',
8 + 'right-icon-class',
9 + 'hover-class',
10 + ],
11 + mixins: [link],
12 + props: {
13 + title: null,
14 + value: null,
15 + icon: String,
16 + size: String,
17 + label: String,
18 + center: Boolean,
19 + isLink: Boolean,
20 + required: Boolean,
21 + clickable: Boolean,
22 + titleWidth: String,
23 + customStyle: String,
24 + arrowDirection: String,
25 + useLabelSlot: Boolean,
26 + border: {
27 + type: Boolean,
28 + value: true,
29 + },
30 + titleStyle: String,
31 + },
32 + methods: {
33 + onClick(event) {
34 + this.$emit('click', event.detail);
35 + this.jumpLink();
36 + },
37 + },
38 +});
1 +{
2 + "component": true,
3 + "usingComponents": {
4 + "van-icon": "../icon/index"
5 + }
6 +}
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +<wxs src="./index.wxs" module="computed" />
3 +
4 +<view
5 + class="custom-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]) }}"
6 + hover-class="van-cell--hover hover-class"
7 + hover-stay-time="70"
8 + style="{{ customStyle }}"
9 + bind:tap="onClick"
10 +>
11 + <van-icon
12 + wx:if="{{ icon }}"
13 + name="{{ icon }}"
14 + class="van-cell__left-icon-wrap"
15 + custom-class="van-cell__left-icon"
16 + />
17 + <slot wx:else name="icon" />
18 +
19 + <view
20 + style="{{ computed.titleStyle({ titleWidth, titleStyle }) }}"
21 + class="van-cell__title title-class"
22 + >
23 +
24 + <block wx:if="{{ title }}">{{ title }}</block>
25 + <slot wx:else name="title" />
26 +
27 + <view wx:if="{{ label || useLabelSlot }}" class="van-cell__label label-class">
28 + <slot wx:if="{{ useLabelSlot }}" name="label" />
29 + <block wx:elif="{{ label }}">{{ label }}</block>
30 + </view>
31 + </view>
32 +
33 + <view class="van-cell__value value-class">
34 + <block wx:if="{{ value || value === 0 }}">{{ value }}</block>
35 + <slot wx:else />
36 + </view>
37 +
38 + <van-icon
39 + wx:if="{{ isLink }}"
40 + name="{{ arrowDirection ? 'arrow' + '-' + arrowDirection : 'arrow' }}"
41 + class="van-cell__right-icon-wrap right-icon-class"
42 + custom-class="van-cell__right-icon"
43 + />
44 + <slot wx:else name="right-icon" />
45 +
46 + <slot name="extra" />
47 +</view>
1 +/* eslint-disable */
2 +var style = require('../wxs/style.wxs');
3 +var addUnit = require('../wxs/add-unit.wxs');
4 +
5 +function titleStyle(data) {
6 + return style([
7 + {
8 + 'max-width': addUnit(data.titleWidth),
9 + 'min-width': addUnit(data.titleWidth),
10 + },
11 + data.titleStyle,
12 + ]);
13 +}
14 +
15 +module.exports = {
16 + titleStyle: titleStyle,
17 +};
1 +@import '../common/index.wxss';.van-cell{background-color:var(--cell-background-color,#fff);box-sizing:border-box;color:var(--cell-text-color,#323233);display:flex;font-size:var(--cell-font-size,14px);line-height:var(--cell-line-height,24px);padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);position:relative;width:100%}.van-cell:after{border-bottom:1px solid #ebedf0;bottom:0;box-sizing:border-box;content:" ";left:16px;pointer-events:none;position:absolute;right:16px;transform:scaleY(.5);transform-origin:center}.van-cell--borderless:after{display:none}.van-cell-group{background-color:var(--cell-background-color,#fff)}.van-cell__label{color:var(--cell-label-color,#969799);font-size:var(--cell-label-font-size,12px);line-height:var(--cell-label-line-height,18px);margin-top:var(--cell-label-margin-top,3px)}.van-cell__value{color:var(--cell-value-color,#969799);overflow:hidden;text-align:right;vertical-align:middle}.van-cell__title,.van-cell__value{flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{align-items:center;display:flex;font-size:var(--cell-icon-size,16px);height:var(--cell-line-height,24px)}.van-cell__left-icon-wrap{margin-right:var(--padding-base,4px)}.van-cell__right-icon-wrap{color:var(--cell-right-icon-color,#969799);margin-left:var(--padding-base,4px)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:var(--cell-line-height,24px)}.van-cell--clickable.van-cell--hover{background-color:var(--cell-active-color,#f2f3f5)}.van-cell--required{overflow:visible}.van-cell--required:before{color:var(--cell-required-color,#ee0a24);content:"*";font-size:var(--cell-font-size,14px);left:var(--padding-xs,8px);position:absolute}.van-cell--center{align-items:center}.van-cell--large{padding-bottom:var(--cell-large-vertical-padding,12px);padding-top:var(--cell-large-vertical-padding,12px)}.van-cell--large .van-cell__title{font-size:var(--cell-large-title-font-size,16px)}.van-cell--large .van-cell__value{font-size:var(--cell-large-value-font-size,16px)}.van-cell--large .van-cell__label{font-size:var(--cell-large-label-font-size,14px)}
...\ No newline at end of file ...\ No newline at end of file
1 +import { useChildren } from '../common/relation';
2 +import { VantComponent } from '../common/component';
3 +VantComponent({
4 + field: true,
5 + relation: useChildren('checkbox', function (target) {
6 + this.updateChild(target);
7 + }),
8 + props: {
9 + max: Number,
10 + value: {
11 + type: Array,
12 + observer: 'updateChildren',
13 + },
14 + disabled: {
15 + type: Boolean,
16 + observer: 'updateChildren',
17 + },
18 + direction: {
19 + type: String,
20 + value: 'vertical',
21 + },
22 + },
23 + methods: {
24 + updateChildren() {
25 + this.children.forEach((child) => this.updateChild(child));
26 + },
27 + updateChild(child) {
28 + const { value, disabled, direction } = this.data;
29 + child.setData({
30 + value: value.indexOf(child.data.name) !== -1,
31 + parentDisabled: disabled,
32 + direction,
33 + });
34 + },
35 + },
36 +});
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +
3 +<view class="{{ utils.bem('checkbox-group', [{ horizontal: direction === 'horizontal' }]) }}">
4 + <slot />
5 +</view>
1 +@import '../common/index.wxss';.van-checkbox-group--horizontal{display:flex;flex-wrap:wrap}
...\ No newline at end of file ...\ No newline at end of file
1 +import { useParent } from '../common/relation';
2 +import { VantComponent } from '../common/component';
3 +function emit(target, value) {
4 + target.$emit('input', value);
5 + target.$emit('change', value);
6 +}
7 +VantComponent({
8 + field: true,
9 + relation: useParent('checkbox-group'),
10 + classes: ['icon-class', 'label-class'],
11 + props: {
12 + value: Boolean,
13 + disabled: Boolean,
14 + useIconSlot: Boolean,
15 + checkedColor: String,
16 + labelPosition: {
17 + type: String,
18 + value: 'right',
19 + },
20 + labelDisabled: Boolean,
21 + shape: {
22 + type: String,
23 + value: 'round',
24 + },
25 + iconSize: {
26 + type: null,
27 + value: 20,
28 + },
29 + },
30 + data: {
31 + parentDisabled: false,
32 + direction: 'vertical',
33 + },
34 + methods: {
35 + emitChange(value) {
36 + if (this.parent) {
37 + this.setParentValue(this.parent, value);
38 + }
39 + else {
40 + emit(this, value);
41 + }
42 + },
43 + toggle() {
44 + const { parentDisabled, disabled, value } = this.data;
45 + if (!disabled && !parentDisabled) {
46 + this.emitChange(!value);
47 + }
48 + },
49 + onClickLabel() {
50 + const { labelDisabled, parentDisabled, disabled, value } = this.data;
51 + if (!disabled && !labelDisabled && !parentDisabled) {
52 + this.emitChange(!value);
53 + }
54 + },
55 + setParentValue(parent, value) {
56 + const parentValue = parent.data.value.slice();
57 + const { name } = this.data;
58 + const { max } = parent.data;
59 + if (value) {
60 + if (max && parentValue.length >= max) {
61 + return;
62 + }
63 + if (parentValue.indexOf(name) === -1) {
64 + parentValue.push(name);
65 + emit(parent, parentValue);
66 + }
67 + }
68 + else {
69 + const index = parentValue.indexOf(name);
70 + if (index !== -1) {
71 + parentValue.splice(index, 1);
72 + emit(parent, parentValue);
73 + }
74 + }
75 + },
76 + },
77 +});
1 +{
2 + "component": true,
3 + "usingComponents": {
4 + "van-icon": "../icon/index"
5 + }
6 +}
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +<wxs src="./index.wxs" module="computed" />
3 +
4 +<view class="{{ utils.bem('checkbox', [{ horizontal: direction === 'horizontal' }]) }} custom-class">
5 + <view
6 + wx:if="{{ labelPosition === 'left' }}"
7 + class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
8 + bindtap="onClickLabel"
9 + >
10 + <slot />
11 + </view>
12 + <view class="van-checkbox__icon-wrap" bindtap="toggle">
13 + <slot wx:if="{{ useIconSlot }}" name="icon" />
14 + <van-icon
15 + wx:else
16 + name="success"
17 + size="0.8em"
18 + class="{{ utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }]) }}"
19 + style="{{ computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) }}"
20 + custom-class="icon-class"
21 + custom-style="line-height: 1.25em;"
22 + />
23 + </view>
24 + <view
25 + wx:if="{{ labelPosition === 'right' }}"
26 + class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
27 + bindtap="onClickLabel"
28 + >
29 + <slot />
30 + </view>
31 +</view>
1 +/* eslint-disable */
2 +var style = require('../wxs/style.wxs');
3 +var addUnit = require('../wxs/add-unit.wxs');
4 +
5 +function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
6 + var styles = {
7 + 'font-size': addUnit(iconSize),
8 + };
9 +
10 + if (checkedColor && value && !disabled && !parentDisabled) {
11 + styles['border-color'] = checkedColor;
12 + styles['background-color'] = checkedColor;
13 + }
14 +
15 + return style(styles);
16 +}
17 +
18 +module.exports = {
19 + iconStyle: iconStyle,
20 +};
1 +@import '../common/index.wxss';.van-checkbox{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox--horizontal{margin-right:12px}.van-checkbox__icon-wrap,.van-checkbox__label{line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{flex:none}.van-checkbox__icon{align-items:center;border:1px solid var(--checkbox-border-color,#c8c9cc);box-sizing:border-box;color:transparent;display:flex;font-size:var(--checkbox-size,20px);height:1em;justify-content:center;text-align:center;transition-duration:var(--checkbox-transition-duration,.2s);transition-property:color,border-color,background-color;width:1em}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:var(--checkbox-checked-icon-color,#1989fa);color:#fff}.van-checkbox__icon--disabled{background-color:var(--checkbox-disabled-background-color,#ebedf0);border-color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__label{word-wrap:break-word;color:var(--checkbox-label-color,#323233);padding-left:var(--checkbox-label-margin,10px)}.van-checkbox__label--left{float:left;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:var(--checkbox-disabled-label-color,#c8c9cc)}.van-checkbox__label:empty{margin:0}
...\ No newline at end of file ...\ No newline at end of file
1 +/// <reference types="miniprogram-api-typings" />
2 +declare type CanvasContext = WechatMiniprogram.CanvasContext;
3 +export declare function adaptor(ctx: CanvasContext & Record<string, unknown>): CanvasContext;
4 +export {};
1 +export function adaptor(ctx) {
2 + // @ts-ignore
3 + return Object.assign(ctx, {
4 + setStrokeStyle(val) {
5 + ctx.strokeStyle = val;
6 + },
7 + setLineWidth(val) {
8 + ctx.lineWidth = val;
9 + },
10 + setLineCap(val) {
11 + ctx.lineCap = val;
12 + },
13 + setFillStyle(val) {
14 + ctx.fillStyle = val;
15 + },
16 + setFontSize(val) {
17 + ctx.font = String(val);
18 + },
19 + setGlobalAlpha(val) {
20 + ctx.globalAlpha = val;
21 + },
22 + setLineJoin(val) {
23 + ctx.lineJoin = val;
24 + },
25 + setTextAlign(val) {
26 + ctx.textAlign = val;
27 + },
28 + setMiterLimit(val) {
29 + ctx.miterLimit = val;
30 + },
31 + setShadow(offsetX, offsetY, blur, color) {
32 + ctx.shadowOffsetX = offsetX;
33 + ctx.shadowOffsetY = offsetY;
34 + ctx.shadowBlur = blur;
35 + ctx.shadowColor = color;
36 + },
37 + setTextBaseline(val) {
38 + ctx.textBaseline = val;
39 + },
40 + createCircularGradient() { },
41 + draw() { },
42 + });
43 +}
1 +import { BLUE, WHITE } from '../common/color';
2 +import { VantComponent } from '../common/component';
3 +import { getSystemInfoSync } from '../common/utils';
4 +import { isObj } from '../common/validator';
5 +import { canIUseCanvas2d } from '../common/version';
6 +import { adaptor } from './canvas';
7 +function format(rate) {
8 + return Math.min(Math.max(rate, 0), 100);
9 +}
10 +const PERIMETER = 2 * Math.PI;
11 +const BEGIN_ANGLE = -Math.PI / 2;
12 +const STEP = 1;
13 +VantComponent({
14 + props: {
15 + text: String,
16 + lineCap: {
17 + type: String,
18 + value: 'round',
19 + },
20 + value: {
21 + type: Number,
22 + value: 0,
23 + observer: 'reRender',
24 + },
25 + speed: {
26 + type: Number,
27 + value: 50,
28 + },
29 + size: {
30 + type: Number,
31 + value: 100,
32 + observer() {
33 + this.drawCircle(this.currentValue);
34 + },
35 + },
36 + fill: String,
37 + layerColor: {
38 + type: String,
39 + value: WHITE,
40 + },
41 + color: {
42 + type: null,
43 + value: BLUE,
44 + observer() {
45 + this.setHoverColor().then(() => {
46 + this.drawCircle(this.currentValue);
47 + });
48 + },
49 + },
50 + type: {
51 + type: String,
52 + value: '',
53 + },
54 + strokeWidth: {
55 + type: Number,
56 + value: 4,
57 + },
58 + clockwise: {
59 + type: Boolean,
60 + value: true,
61 + },
62 + },
63 + data: {
64 + hoverColor: BLUE,
65 + },
66 + methods: {
67 + getContext() {
68 + const { type, size } = this.data;
69 + if (type === '' || !canIUseCanvas2d()) {
70 + const ctx = wx.createCanvasContext('van-circle', this);
71 + return Promise.resolve(ctx);
72 + }
73 + const dpr = getSystemInfoSync().pixelRatio;
74 + return new Promise((resolve) => {
75 + wx.createSelectorQuery()
76 + .in(this)
77 + .select('#van-circle')
78 + .node()
79 + .exec((res) => {
80 + const canvas = res[0].node;
81 + const ctx = canvas.getContext(type);
82 + if (!this.inited) {
83 + this.inited = true;
84 + canvas.width = size * dpr;
85 + canvas.height = size * dpr;
86 + ctx.scale(dpr, dpr);
87 + }
88 + resolve(adaptor(ctx));
89 + });
90 + });
91 + },
92 + setHoverColor() {
93 + const { color, size } = this.data;
94 + if (isObj(color)) {
95 + return this.getContext().then((context) => {
96 + const LinearColor = context.createLinearGradient(size, 0, 0, 0);
97 + Object.keys(color)
98 + .sort((a, b) => parseFloat(a) - parseFloat(b))
99 + .map((key) => LinearColor.addColorStop(parseFloat(key) / 100, color[key]));
100 + this.hoverColor = LinearColor;
101 + });
102 + }
103 + this.hoverColor = color;
104 + return Promise.resolve();
105 + },
106 + presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) {
107 + const { strokeWidth, lineCap, clockwise, size } = this.data;
108 + const position = size / 2;
109 + const radius = position - strokeWidth / 2;
110 + context.setStrokeStyle(strokeStyle);
111 + context.setLineWidth(strokeWidth);
112 + context.setLineCap(lineCap);
113 + context.beginPath();
114 + context.arc(position, position, radius, beginAngle, endAngle, !clockwise);
115 + context.stroke();
116 + if (fill) {
117 + context.setFillStyle(fill);
118 + context.fill();
119 + }
120 + },
121 + renderLayerCircle(context) {
122 + const { layerColor, fill } = this.data;
123 + this.presetCanvas(context, layerColor, 0, PERIMETER, fill);
124 + },
125 + renderHoverCircle(context, formatValue) {
126 + const { clockwise } = this.data;
127 + // ็ป“ๆŸ่ง’ๅบฆ
128 + const progress = PERIMETER * (formatValue / 100);
129 + const endAngle = clockwise
130 + ? BEGIN_ANGLE + progress
131 + : 3 * Math.PI - (BEGIN_ANGLE + progress);
132 + this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle);
133 + },
134 + drawCircle(currentValue) {
135 + const { size } = this.data;
136 + this.getContext().then((context) => {
137 + context.clearRect(0, 0, size, size);
138 + this.renderLayerCircle(context);
139 + const formatValue = format(currentValue);
140 + if (formatValue !== 0) {
141 + this.renderHoverCircle(context, formatValue);
142 + }
143 + context.draw();
144 + });
145 + },
146 + reRender() {
147 + // tofector ๅŠจ็”ปๆš‚ๆ—ถๆฒกๆœ‰ๆƒณๅˆฐๅฅฝ็š„่งฃๅ†ณๆ–นๆกˆ
148 + const { value, speed } = this.data;
149 + if (speed <= 0 || speed > 1000) {
150 + this.drawCircle(value);
151 + return;
152 + }
153 + this.clearMockInterval();
154 + this.currentValue = this.currentValue || 0;
155 + const run = () => {
156 + this.interval = setTimeout(() => {
157 + if (this.currentValue !== value) {
158 + if (Math.abs(this.currentValue - value) < STEP) {
159 + this.currentValue = value;
160 + }
161 + else if (this.currentValue < value) {
162 + this.currentValue += STEP;
163 + }
164 + else {
165 + this.currentValue -= STEP;
166 + }
167 + this.drawCircle(this.currentValue);
168 + run();
169 + }
170 + else {
171 + this.clearMockInterval();
172 + }
173 + }, 1000 / speed);
174 + };
175 + run();
176 + },
177 + clearMockInterval() {
178 + if (this.interval) {
179 + clearTimeout(this.interval);
180 + this.interval = null;
181 + }
182 + },
183 + },
184 + mounted() {
185 + this.currentValue = this.data.value;
186 + this.setHoverColor().then(() => {
187 + this.drawCircle(this.currentValue);
188 + });
189 + },
190 + destroyed() {
191 + this.clearMockInterval();
192 + },
193 +});
1 +{
2 + "component": true
3 +}
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +
3 +<view class="van-circle">
4 + <canvas class="van-circle__canvas" type="{{ type }}" style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" id="van-circle" canvas-id="van-circle"></canvas>
5 + <view wx:if="{{ !text }}" class="van-circle__text">
6 + <slot></slot>
7 + </view>
8 + <cover-view wx:else class="van-circle__text">{{ text }}</cover-view>
9 +</view>
1 +@import '../common/index.wxss';.van-circle{display:inline-block;position:relative;text-align:center}.van-circle__text{color:var(--circle-text-color,#323233);left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}
...\ No newline at end of file ...\ No newline at end of file
1 +import { useParent } from '../common/relation';
2 +import { VantComponent } from '../common/component';
3 +VantComponent({
4 + relation: useParent('row'),
5 + props: {
6 + span: Number,
7 + offset: Number,
8 + },
9 +});
1 +{
2 + "component": true
3 +}
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +<wxs src="./index.wxs" module="computed" />
3 +
4 +<view
5 + class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
6 + style="{{ computed.rootStyle({ gutter }) }}"
7 +>
8 + <slot />
9 +</view>
1 +/* eslint-disable */
2 +var style = require('../wxs/style.wxs');
3 +var addUnit = require('../wxs/add-unit.wxs');
4 +
5 +function rootStyle(data) {
6 + if (!data.gutter) {
7 + return '';
8 + }
9 +
10 + return style({
11 + 'padding-right': addUnit(data.gutter / 2),
12 + 'padding-left': addUnit(data.gutter / 2),
13 + });
14 +}
15 +
16 +module.exports = {
17 + rootStyle: rootStyle,
18 +};
1 +@import '../common/index.wxss';.van-col{box-sizing:border-box;float:left}.van-col--1{width:4.16666667%}.van-col--offset-1{margin-left:4.16666667%}.van-col--2{width:8.33333333%}.van-col--offset-2{margin-left:8.33333333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66666667%}.van-col--offset-4{margin-left:16.66666667%}.van-col--5{width:20.83333333%}.van-col--offset-5{margin-left:20.83333333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16666667%}.van-col--offset-7{margin-left:29.16666667%}.van-col--8{width:33.33333333%}.van-col--offset-8{margin-left:33.33333333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66666667%}.van-col--offset-10{margin-left:41.66666667%}.van-col--11{width:45.83333333%}.van-col--offset-11{margin-left:45.83333333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16666667%}.van-col--offset-13{margin-left:54.16666667%}.van-col--14{width:58.33333333%}.van-col--offset-14{margin-left:58.33333333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66666667%}.van-col--offset-16{margin-left:66.66666667%}.van-col--17{width:70.83333333%}.van-col--offset-17{margin-left:70.83333333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16666667%}.van-col--offset-19{margin-left:79.16666667%}.van-col--20{width:83.33333333%}.van-col--offset-20{margin-left:83.33333333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66666667%}.van-col--offset-22{margin-left:91.66666667%}.van-col--23{width:95.83333333%}.van-col--offset-23{margin-left:95.83333333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%}
...\ No newline at end of file ...\ No newline at end of file
1 +/// <reference types="miniprogram-api-typings" />
2 +export declare function setContentAnimate(context: WechatMiniprogram.Component.TrivialInstance, expanded: boolean, mounted: boolean): void;
1 +import { getRect } from '../common/utils';
2 +function useAnimation(context, expanded, mounted, height) {
3 + const animation = wx.createAnimation({
4 + duration: 0,
5 + timingFunction: 'ease-in-out',
6 + });
7 + if (expanded) {
8 + if (height === 0) {
9 + animation.height('auto').top(1).step();
10 + }
11 + else {
12 + animation
13 + .height(height)
14 + .top(1)
15 + .step({
16 + duration: mounted ? 300 : 1,
17 + })
18 + .height('auto')
19 + .step();
20 + }
21 + context.setData({
22 + animation: animation.export(),
23 + });
24 + return;
25 + }
26 + animation.height(height).top(0).step({ duration: 1 }).height(0).step({
27 + duration: 300,
28 + });
29 + context.setData({
30 + animation: animation.export(),
31 + });
32 +}
33 +export function setContentAnimate(context, expanded, mounted) {
34 + getRect(context, '.van-collapse-item__content')
35 + .then((rect) => rect.height)
36 + .then((height) => {
37 + useAnimation(context, expanded, mounted, height);
38 + });
39 +}
1 +import { VantComponent } from '../common/component';
2 +import { useParent } from '../common/relation';
3 +import { setContentAnimate } from './animate';
4 +VantComponent({
5 + classes: ['title-class', 'content-class'],
6 + relation: useParent('collapse'),
7 + props: {
8 + size: String,
9 + name: null,
10 + title: null,
11 + value: null,
12 + icon: String,
13 + label: String,
14 + disabled: Boolean,
15 + clickable: Boolean,
16 + border: {
17 + type: Boolean,
18 + value: true,
19 + },
20 + isLink: {
21 + type: Boolean,
22 + value: true,
23 + },
24 + },
25 + data: {
26 + expanded: false,
27 + },
28 + mounted() {
29 + this.updateExpanded();
30 + this.mounted = true;
31 + },
32 + methods: {
33 + updateExpanded() {
34 + if (!this.parent) {
35 + return;
36 + }
37 + const { value, accordion } = this.parent.data;
38 + const { children = [] } = this.parent;
39 + const { name } = this.data;
40 + const index = children.indexOf(this);
41 + const currentName = name == null ? index : name;
42 + const expanded = accordion
43 + ? value === currentName
44 + : (value || []).some((name) => name === currentName);
45 + if (expanded !== this.data.expanded) {
46 + setContentAnimate(this, expanded, this.mounted);
47 + }
48 + this.setData({ index, expanded });
49 + },
50 + onClick() {
51 + if (this.data.disabled) {
52 + return;
53 + }
54 + const { name, expanded } = this.data;
55 + const index = this.parent.children.indexOf(this);
56 + const currentName = name == null ? index : name;
57 + this.parent.switch(currentName, !expanded);
58 + },
59 + },
60 +});
1 +{
2 + "component": true,
3 + "usingComponents": {
4 + "van-cell": "../cell/index"
5 + }
6 +}
1 +<wxs src="../wxs/utils.wxs" module="utils" />
2 +
3 +<view class="van-collapse-item custom-class {{ index !== 0 ? 'van-hairline--top' : '' }}">
4 + <van-cell
5 + size="{{ size }}"
6 + title="{{ title }}"
7 + title-class="title-class"
8 + icon="{{ icon }}"
9 + value="{{ value }}"
10 + label="{{ label }}"
11 + is-link="{{ isLink }}"
12 + clickable="{{ clickable }}"
13 + border="{{ border && expanded }}"
14 + class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
15 + right-icon-class="van-cell__right-icon"
16 + custom-class="van-cell"
17 + hover-class="van-cell--hover"
18 + bind:click="onClick"
19 + >
20 + <slot
21 + name="title"
22 + slot="title"
23 + />
24 + <slot
25 + name="icon"
26 + slot="icon"
27 + />
28 + <slot name="value" />
29 + <slot
30 + name="right-icon"
31 + slot="right-icon"
32 + />
33 + </van-cell>
34 + <view
35 + class="{{ utils.bem('collapse-item__wrapper') }}"
36 + style="height: 0;"
37 + animation="{{ animation }}"
38 + >
39 + <view
40 + class="van-collapse-item__content content-class"
41 + >
42 + <slot />
43 + </view>
44 + </view>
45 +</view>
1 +@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{transform:rotate(90deg);transition:transform var(--collapse-item-transition-duration,.3s)}.van-collapse-item__title--expanded .van-cell__right-icon{transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__content{background-color:var(--collapse-item-content-background-color,#fff);color:var(--collapse-item-content-text-color,#969799);font-size:var(--collapse-item-content-font-size,13px);line-height:var(--collapse-item-content-line-height,1.5);padding:var(--collapse-item-content-padding,15px)}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.