├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmrc ├── README.md ├── babel.config.js ├── config ├── dev.js ├── h5-building-script.js ├── index.js └── prod.js ├── global.d.ts ├── h5_deploy.sh ├── package.json ├── project.config.json ├── src ├── app.config.ts ├── app.scss ├── app.ts ├── assets │ └── images │ │ ├── curtain.png │ │ ├── favicon.ico │ │ ├── icon-list-action.png │ │ ├── icon-list-basic.png │ │ ├── icon-list-form.png │ │ ├── icon-list-hoc.png │ │ ├── icon-list-layout.png │ │ ├── icon-list-navigation.png │ │ ├── icon-list-view.png │ │ ├── logo_taro.png │ │ └── verification_code.png ├── components │ ├── ExampleItem.vue │ ├── NavButton.vue │ ├── Page.vue │ ├── Panel.vue │ ├── PropItem.vue │ ├── index.scss │ └── index.ts ├── index.html ├── pages │ ├── action │ │ ├── action-sheet │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── activity-indicator │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── message │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── modal │ │ │ ├── index.config.ts │ │ │ └── index.vue │ │ ├── progress │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── swipe-action │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ └── toast │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ ├── advanced │ │ ├── calendar │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── skeleton │ │ │ ├── index.config.ts │ │ │ └── index.vue │ │ └── virtual-scroll │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ ├── basic │ │ ├── button │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── color │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── icon │ │ │ ├── icons.ts │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ └── typo │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ ├── form │ │ ├── checkbox │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── form │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── image-picker │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── input-number │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── input │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── picker-view │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── picker │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── radio │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── range │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── rate │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── search-bar │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── slider │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── switch │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ └── textarea │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ ├── index │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ ├── layout │ │ ├── accordion │ │ │ ├── index.config.ts │ │ │ └── index.vue │ │ ├── card │ │ │ ├── index.config.ts │ │ │ └── index.vue │ │ ├── flex │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── float-layout │ │ │ ├── index.config.ts │ │ │ └── index.vue │ │ ├── grid │ │ │ ├── index.config.ts │ │ │ └── index.vue │ │ └── list │ │ │ ├── index.config.ts │ │ │ └── index.vue │ ├── navigation │ │ ├── drawer │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── indexes │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ ├── index.vue │ │ │ └── mock-data.ts │ │ ├── navbar │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── pagination │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── segmented-control │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ ├── tabbar │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ │ └── tabs │ │ │ ├── index.config.ts │ │ │ ├── index.scss │ │ │ └── index.vue │ ├── panel │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ └── view │ │ ├── article │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── avatar │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── badge │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── countdown │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── curtain │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── divider │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── load-more │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── noticebar │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── steps │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── swiper │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ ├── tag │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue │ │ └── timeline │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.vue └── shims-vue.d.ts ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 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 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "taro/vue3" 4 | ] 5 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | deploy_versions/ 3 | .temp/ 4 | .rn_temp/ 5 | node_modules/ 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org 2 | disturl=https://npm.taobao.org/dist 3 | sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 4 | phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/ 5 | electron_mirror=https://npm.taobao.org/mirrors/electron/ 6 | chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver 7 | operadriver_cdnurl=https://npm.taobao.org/mirrors/operadriver 8 | selenium_cdnurl=https://npm.taobao.org/mirrors/selenium 9 | node_inspector_cdnurl=https://npm.taobao.org/mirrors/node-inspector 10 | fsevents_binary_host_mirror=http://npm.taobao.org/mirrors/fsevents/ 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Repo for taro-ui-vue3 demo 2 | 3 | This repo is a demo showcase for taro-ui-vue3, a Taro UI library Rewritten in Vue 3.0. -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 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: true 8 | }] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /config/dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: '"development"' 4 | }, 5 | defineConstants: { 6 | }, 7 | mini: {}, 8 | h5: {} 9 | } 10 | -------------------------------------------------------------------------------- /config/h5-building-script.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const fs = require('fs') 3 | 4 | const distH5Vue3IndexPath = path.resolve(__dirname, '../node_modules/@tarojs/components/dist-h5/vue3/index.js') 5 | const distH5vue3IndexNew = ` 6 | // This file is generated by config/h5-building-script.js 7 | 8 | import createComponent from './createComponent' 9 | import { simpleComponents } from '../vue/simpleComponents' 10 | import createFormsComponent from './createFormsComponent' 11 | import Text from './components/text' 12 | import Image from './components/image' 13 | import Icon from './components/icon' 14 | import ScrollView from './components/scroll-view' 15 | 16 | function genSimpleComponents(components) { 17 | const componentMap = {} 18 | components.map(component => { 19 | if (typeof component === 'string') { 20 | componentMap[component] = createComponent(component) 21 | } else { 22 | const { name, classNames } = component 23 | componentMap[name] = createComponent(name, classNames) 24 | } 25 | }) 26 | return componentMap 27 | } 28 | 29 | const componentMap = genSimpleComponents(simpleComponents) 30 | 31 | // simple components 32 | export const View = componentMap['taro-view'] 33 | export const RichText = componentMap['taro-rich-text'] 34 | export const Button = componentMap['taro-button'] 35 | export const CheckboxGroup = componentMap['taro-checkbox-group'] 36 | export const Editor = componentMap['taro-editor'] 37 | export const Form = componentMap['taro-form'] 38 | export const Label = componentMap['taro-label'] 39 | export const PickerView = componentMap['taro-picker-view'] 40 | export const PickerViewColumn = componentMap['taro-picker-view-column'] 41 | export const CoverImage = componentMap['taro-cover-image'] 42 | export const CoverView = componentMap['taro-cover-view'] 43 | export const MoveableArea = componentMap['taro-moveable-area'] 44 | export const MoveableView = componentMap['taro-moveable-view'] 45 | export const Swiper = componentMap['taro-swiper'] 46 | export const FunctionalPageNavigator = componentMap['taro-functional-page-navigator'] 47 | export const Navigator = componentMap['taro-navigator'] 48 | export const Audio = componentMap['taro-audio'] 49 | export const Camera = componentMap['taro-camera'] 50 | export const LivePlayer = componentMap['taro-live-player'] 51 | export const Map = componentMap['taro-map'] 52 | export const Ad = componentMap['taro-ad'] 53 | export const OfficialAccount = componentMap['taro-official-account'] 54 | export const OpenData = componentMap['taro-open-data'] 55 | export const WebView = componentMap['taro-web-view'] 56 | export const NavigationBar = componentMap['taro-navigation-bar'] 57 | export const Block = componentMap['taro-block'] 58 | export const Canvas = componentMap['taro-canvas'] 59 | 60 | // simple components with classNames 61 | export const Checkbox = componentMap['taro-checkbox'] 62 | export const Progress = componentMap['taro-progress'] 63 | export const RadioGroup = componentMap['taro-radio-group'] 64 | export const Radio = componentMap['taro-radio'] 65 | export const SwiperItem = componentMap['taro-swiper-item'] 66 | export const Video = componentMap['taro-video'] 67 | 68 | // Form components 69 | export const Input = createFormsComponent('taro-input', 'input') 70 | export const Textarea = createFormsComponent('taro-textarea', 'input') 71 | export const Picker = createFormsComponent('taro-picker', 'change') 72 | export const Switch = createFormsComponent('taro-switch', 'change', 'checked') 73 | export const Slider = createFormsComponent('taro-slider', 'change', 'value', ['weui-slider-box']) 74 | 75 | export function initVue3Components(app) { 76 | app.config.isCustomElement = tag => /^taro-/.test(tag) || tag === 'root' || tag === 'block' 77 | 78 | for (const [name, component] of Object.entries(componentMap)) { 79 | app.component(name, component) 80 | } 81 | 82 | app.component('taro-input', Input) 83 | app.component('taro-textarea', Textarea) 84 | app.component('taro-picker', Picker) 85 | app.component('taro-switch', Switch) 86 | app.component('taro-slider', Slider) 87 | app.component('taro-text', Text) 88 | app.component('taro-image', Image) 89 | app.component('taro-icon', Icon) 90 | app.component('taro-scroll-view', ScrollView) 91 | } 92 | 93 | export { 94 | // others 95 | Text, 96 | Image, 97 | Icon, 98 | ScrollView 99 | } 100 | ` 101 | 102 | fs.writeFileSync(distH5Vue3IndexPath, distH5vue3IndexNew, { encoding: 'utf-8' }) -------------------------------------------------------------------------------- /config/prod.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: '"production"' 4 | }, 5 | defineConstants: { 6 | }, 7 | terser: { 8 | enable: true, 9 | config: { 10 | compress: { 11 | arrows: true, 12 | }, 13 | module: false 14 | } 15 | }, 16 | csso: { 17 | enable: true, 18 | config: { 19 | comments: false 20 | } 21 | }, 22 | mini: { 23 | webpackChain(chain) { 24 | chain.plugin('analyzer') 25 | .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []) 26 | } 27 | }, 28 | h5: { 29 | styleLoaderOption: { 30 | esModule: true, 31 | insert: 'head' 32 | }, 33 | enableExtract: true, 34 | miniCssExtractPluginOption: { 35 | filename: 'css/[name].css', 36 | chunkFilename: 'css/[id].css' 37 | }, 38 | imageUrlLoaderOption: { 39 | limit: true, 40 | encoding: true, 41 | mimetype: 'image/png', 42 | esModule: true 43 | }, 44 | fontUrlLoaderOption: { 45 | limit: true, 46 | encoding: true, 47 | mimetype: true, 48 | esModule: true 49 | }, 50 | webpackChain(chain) { 51 | chain.plugin('analyzer') 52 | .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []) 53 | 54 | chain.merge({ 55 | mode: 'production', 56 | optimization: { 57 | usedExports: true, 58 | minimize: true 59 | } 60 | }) 61 | 62 | chain.resolve.alias 63 | .set( 64 | '@tarojs/components$', 65 | '@tarojs/components/dist-h5/vue3/index.js' 66 | ) 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png'; 2 | declare module '*.gif'; 3 | declare module '*.jpg'; 4 | declare module '*.jpeg'; 5 | declare module '*.svg'; 6 | declare module '*.css'; 7 | declare module '*.less'; 8 | declare module '*.scss'; 9 | declare module '*.sass'; 10 | declare module '*.styl'; 11 | 12 | declare namespace NodeJS { 13 | interface ProcessEnv { 14 | TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd' 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /h5_deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/bash 2 | 3 | # build h5 4 | yarn build:h5 5 | 6 | cp src/assets/images/favicon.ico dist/h5/favicon.ico 7 | 8 | # cd to dist/h5 9 | cd dist/h5 10 | 11 | # add nojykell 12 | touch .nojekyll 13 | 14 | # git ops 15 | git init 16 | git add -A 17 | git commit -m "Deploy" 18 | 19 | # push to gh-pages branch 20 | git push -f git@github.com:b2nil/taro-ui-vue3-demo.git main:gh-pages -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "taro-ui-vue3-demo", 3 | "version": "1.0.0-alpha.18", 4 | "private": true, 5 | "description": "A demo showcase of taro-ui-vue3", 6 | "templateInfo": { 7 | "name": "default", 8 | "typescript": true, 9 | "css": "sass" 10 | }, 11 | "scripts": { 12 | "build:weapp": "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": "node ./config/h5-building-script.js && taro build --type h5", 17 | "build:rn": "taro build --type rn", 18 | "build:qq": "taro build --type qq", 19 | "build:jd": "taro build --type jd", 20 | "build:quickapp": "taro build --type quickapp", 21 | "dev:weapp": "npm run build:weapp -- --watch", 22 | "dev:swan": "npm run build:swan -- --watch", 23 | "dev:alipay": "npm run build:alipay -- --watch", 24 | "dev:tt": "npm run build:tt -- --watch", 25 | "dev:h5": "npm run build:h5 -- --watch", 26 | "dev:rn": "npm run build:rn -- --watch", 27 | "dev:qq": "npm run build:qq -- --watch", 28 | "dev:jd": "npm run build:jd -- --watch", 29 | "dev:quickapp": "npm run build:quickapp -- --watch", 30 | "deploy:h5": "./h5_deploy.sh" 31 | }, 32 | "browserslist": [ 33 | "last 3 versions", 34 | "Android >= 4.1", 35 | "ios >= 8" 36 | ], 37 | "author": "b2nil", 38 | "dependencies": { 39 | "@babel/runtime": "^7.7.7", 40 | "@tarojs/components": "^3.0.18", 41 | "@tarojs/runtime": "^3.0.18", 42 | "@tarojs/taro": "^3.0.18", 43 | "taro-ui-vue3": "^1.0.0-alpha.18", 44 | "vue": "^3.0.0" 45 | }, 46 | "devDependencies": { 47 | "@babel/core": "^7.8.0", 48 | "@tarojs/mini-runner": "^3.0.18", 49 | "@tarojs/webpack-runner": "^3.0.18", 50 | "@types/webpack-env": "^1.13.6", 51 | "@typescript-eslint/eslint-plugin": "^2.x", 52 | "@typescript-eslint/parser": "^2.x", 53 | "@vue/compiler-sfc": "^3.0.0", 54 | "babel-preset-taro": "^3.0.18", 55 | "eslint": "^6.8.0", 56 | "eslint-config-taro": "^3.0.18", 57 | "eslint-plugin-vue": "^7.0.0-alpha.6", 58 | "stylelint": "9.3.0", 59 | "typescript": "^3.7.0", 60 | "vue-loader": "^16.1.1", 61 | "webpack-bundle-analyzer": "^4.2.0" 62 | } 63 | } -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "miniprogramRoot": "./dist", 3 | "projectname": "taro-ui-vue3-demo", 4 | "description": "A demo showcase of taro-ui-vue3", 5 | "appid": "touristappid", 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": false, 9 | "postcss": false, 10 | "minified": false 11 | }, 12 | "compileType": "miniprogram" 13 | } 14 | -------------------------------------------------------------------------------- /src/app.config.ts: -------------------------------------------------------------------------------- 1 | const pOrP = process.env.TARO_ENV === 'alipay' || process.env.TARO_ENV === 'swan' 2 | 3 | const subpackages = [ 4 | { 5 | root: 'pages/basic', 6 | pages: [ 7 | // basic 8 | 'icon/index', 9 | 'button/index', 10 | 'color/index', 11 | 'typo/index', 12 | ] 13 | }, 14 | { 15 | root: 'pages/view', 16 | pages: [ 17 | // view 18 | 'noticebar/index', 19 | 'badge/index', 20 | 'tag/index', 21 | 'avatar/index', 22 | 'article/index', 23 | 'timeline/index', 24 | 'swiper/index', 25 | 'load-more/index', 26 | 'divider/index', 27 | 'countdown/index', 28 | 'steps/index', 29 | 'curtain/index', 30 | ] 31 | }, 32 | { 33 | root: 'pages/action', 34 | pages: [ 35 | // action 36 | 'toast/index', 37 | 'modal/index', 38 | 'progress/index', 39 | 'action-sheet/index', 40 | 'swipe-action/index', 41 | 'activity-indicator/index', 42 | 'message/index', 43 | ] 44 | }, 45 | { 46 | root: 'pages/navigation', 47 | pages: [ 48 | // navigation 49 | 'drawer/index', 50 | 'pagination/index', 51 | 'tabs/index', 52 | 'tabbar/index', 53 | 'segmented-control/index', 54 | 'navbar/index', 55 | 'indexes/index', 56 | ] 57 | }, 58 | { 59 | root: 'pages/layout', 60 | pages: [ 61 | // layout 62 | 'flex/index', 63 | 'grid/index', 64 | 'float-layout/index', 65 | 'card/index', 66 | 'list/index', 67 | 'accordion/index', 68 | ] 69 | }, 70 | { 71 | root: 'pages/form', 72 | pages: [ 73 | // form 74 | 'form/index', 75 | 'checkbox/index', 76 | 'input/index', 77 | 'input-number/index', 78 | 'radio/index', 79 | 'textarea/index', 80 | 'switch/index', 81 | 'rate/index', 82 | 'picker/index', 83 | 'picker-view/index', 84 | 'slider/index', 85 | 'search-bar/index', 86 | 'image-picker/index', 87 | 'range/index', 88 | ] 89 | }, 90 | { 91 | root: 'pages/advanced', 92 | pages: [ 93 | // advanced 94 | 'calendar/index', 95 | 'virtual-scroll/index', 96 | 'skeleton/index', 97 | ] 98 | }, 99 | ] 100 | 101 | export default { 102 | pages: [ 103 | 'pages/index/index', 104 | 'pages/panel/index', 105 | // theme 106 | // 'pages/theme/index' 107 | ], 108 | [`sub${pOrP ? 'P' : 'p'}ackages`]: subpackages, 109 | window: { 110 | backgroundTextStyle: 'light', 111 | navigationBarBackgroundColor: '#fff', 112 | navigationBarTitleText: 'Taro UI Vue3', 113 | navigationBarTextStyle: 'black' 114 | } 115 | } -------------------------------------------------------------------------------- /src/app.scss: -------------------------------------------------------------------------------- 1 | @import "taro-ui-vue3/dist/style/index.scss"; 2 | 3 | #app { 4 | background-color: #f8f8f8; 5 | } 6 | 7 | .at-frozen { 8 | position: fixed; 9 | width: 100%; 10 | } 11 | 12 | .page { 13 | display: flex; 14 | flex-direction: column; 15 | box-sizing: border-box; 16 | min-height: 100vh; 17 | background-color: #f8f8f8; 18 | } 19 | 20 | view { 21 | box-sizing: border-box; 22 | } 23 | 24 | // 实例模板 25 | .example { 26 | padding: 10px 20px; 27 | margin-bottom: 10px; 28 | 29 | &:not(:first-child) { 30 | border-top: 40px solid #f5f5f5; 31 | } 32 | 33 | &__header { 34 | margin-bottom: 20px; 35 | padding-bottom: 10px; 36 | border-bottom: 1px solid $color-grey-4; 37 | 38 | &-title { 39 | color: $color-grey-2; 40 | font-size: 28px; 41 | } 42 | 43 | &-note { 44 | font-size: 24px; 45 | margin-left: 20px; 46 | color: $color-grey-3; 47 | } 48 | } 49 | } 50 | 51 | /** 52 | * Example 样式 53 | */ 54 | .panel__content { 55 | .example-item { 56 | margin-bottom: 20px; 57 | 58 | &:last-child { 59 | margin-bottom: 0; 60 | } 61 | 62 | .subitem { 63 | display: inline-block; 64 | margin-left: 24px; 65 | } 66 | 67 | &__desc { 68 | margin-bottom: 12px; 69 | color: #333; 70 | font-size: 24px; 71 | } 72 | } 73 | } 74 | 75 | .doc-body { 76 | min-height: calc(100vh - 180px); 77 | background: #fff; 78 | box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11); 79 | padding-bottom: 60px; 80 | padding-bottom: calc(constant(safe-area-inset-bottom) + 60px); 81 | padding-bottom: calc(env(safe-area-inset-bottom) + 60px); 82 | 83 | .panel { 84 | margin: 32px 0 56px; 85 | 86 | &__title { 87 | position: relative; 88 | margin-bottom: 50px; 89 | padding-left: 50px; 90 | color: #6a6a77; 91 | font-size: 32px; 92 | font-weight: bold; 93 | line-height: 1.5; 94 | 95 | &::before { 96 | content: ""; 97 | display: inline-block; 98 | position: absolute; 99 | left: 24px; 100 | top: 50%; 101 | margin-top: -20px; 102 | width: 2PX; 103 | height: 40px; 104 | background-color: #6190e8; 105 | box-shadow: 0 7px 12px 0 rgba(97, 144, 232, 0.2); 106 | border-radius: 1PX; 107 | } 108 | } 109 | 110 | &__content { 111 | padding: 0 20px; 112 | 113 | &.no-padding { 114 | padding: 0; 115 | } 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/app.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import { createUI } from 'taro-ui-vue3' 3 | import { Page, Panel, ExampleItem, PropItem, NavButton } from '@/components/index' 4 | import './app.scss' 5 | 6 | const App = createApp({ 7 | onShow(options) { }, 8 | // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖 9 | }) 10 | 11 | const tuv3 = createUI() 12 | App.use(tuv3) 13 | 14 | App.component(Page.name, Page) 15 | App.component(Panel.name, Panel) 16 | App.component(ExampleItem.name, ExampleItem) 17 | App.component(PropItem.name, PropItem) 18 | App.component(NavButton.name, NavButton) 19 | 20 | export default App 21 | -------------------------------------------------------------------------------- /src/assets/images/curtain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/curtain.png -------------------------------------------------------------------------------- /src/assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/icon-list-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/icon-list-action.png -------------------------------------------------------------------------------- /src/assets/images/icon-list-basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/icon-list-basic.png -------------------------------------------------------------------------------- /src/assets/images/icon-list-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/icon-list-form.png -------------------------------------------------------------------------------- /src/assets/images/icon-list-hoc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/icon-list-hoc.png -------------------------------------------------------------------------------- /src/assets/images/icon-list-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/icon-list-layout.png -------------------------------------------------------------------------------- /src/assets/images/icon-list-navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/icon-list-navigation.png -------------------------------------------------------------------------------- /src/assets/images/icon-list-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/icon-list-view.png -------------------------------------------------------------------------------- /src/assets/images/logo_taro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/logo_taro.png -------------------------------------------------------------------------------- /src/assets/images/verification_code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/assets/images/verification_code.png -------------------------------------------------------------------------------- /src/components/ExampleItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/NavButton.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 69 | 70 | -------------------------------------------------------------------------------- /src/components/Page.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 87 | 88 | -------------------------------------------------------------------------------- /src/components/Panel.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/PropItem.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/index.scss: -------------------------------------------------------------------------------- 1 | .doc-header { 2 | display: flex; 3 | align-items: center; 4 | padding: 60px; 5 | height: 180px; 6 | 7 | &__title { 8 | position: relative; 9 | height: 90px; 10 | color: #333; 11 | font-size: 40px; 12 | font-weight: bold; 13 | 14 | &::after { 15 | content: ''; 16 | position: absolute; 17 | left: 0; 18 | bottom: 0; 19 | display: inline-block; 20 | width: 120px; 21 | height: 2PX; 22 | border-radius: 1PX; 23 | background-color: #6190E8; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Page } from "./Page.vue" 2 | export { default as Panel } from "./Panel.vue" 3 | export { default as ExampleItem } from "./ExampleItem.vue" 4 | export { default as PropItem } from "./PropItem.vue" 5 | export { default as NavButton } from "./NavButton.vue" -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | A Demo Showcase of taro-ui-vue3 14 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/pages/action/action-sheet/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/action/action-sheet/index.scss: -------------------------------------------------------------------------------- 1 | @import 'taro-ui-vue3/dist/style/variables/default'; 2 | 3 | .danger { 4 | color: $color-error; 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/action/action-sheet/index.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 122 | -------------------------------------------------------------------------------- /src/pages/action/activity-indicator/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro-UI-Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/action/activity-indicator/index.scss: -------------------------------------------------------------------------------- 1 | @import 'taro-ui-vue3/dist/style/mixins/index.scss'; 2 | @import 'taro-ui-vue3/dist/style/variables/default.scss'; 3 | 4 | .activity-indicator-page .panel__content { 5 | .example-item { 6 | @include display-flex; 7 | @include align-items(center); 8 | 9 | &--center { 10 | height: 200px; 11 | position: relative; 12 | background-color: #fafbfc; 13 | margin-bottom: 20px; 14 | } 15 | 16 | .subitem { 17 | margin-left: 32px; 18 | @include flex(0, 0, auto); 19 | 20 | &:first-child { 21 | margin-left: 0; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/pages/action/activity-indicator/index.vue: -------------------------------------------------------------------------------- 1 | 77 | 78 | -------------------------------------------------------------------------------- /src/pages/action/message/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/action/message/index.scss: -------------------------------------------------------------------------------- 1 | .toast-page .example__body { 2 | &-button { 3 | display: inline-block; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/action/message/index.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | -------------------------------------------------------------------------------- /src/pages/action/modal/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/action/modal/index.vue: -------------------------------------------------------------------------------- 1 | 115 | 116 | 163 | -------------------------------------------------------------------------------- /src/pages/action/progress/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/action/progress/index.scss: -------------------------------------------------------------------------------- 1 | .progress-page .example-item { 2 | &__buttons { 3 | margin-top: 20px; 4 | 5 | .btn { 6 | display: inline-block; 7 | margin-left: 12px; 8 | 9 | &:first-child { 10 | margin-left: 0; 11 | } 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /src/pages/action/progress/index.vue: -------------------------------------------------------------------------------- 1 | 135 | 136 | -------------------------------------------------------------------------------- /src/pages/action/swipe-action/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/action/swipe-action/index.scss: -------------------------------------------------------------------------------- 1 | .swipe-action-page { 2 | .panel__controller { 3 | text-align: center; 4 | } 5 | 6 | .normal { 7 | padding: 0 24px; 8 | line-height: 88px; 9 | } 10 | 11 | .example-item--border { 12 | /* prettier-ignore */ 13 | border: 1PX solid #e2ecf4; 14 | border-left: none; 15 | border-right: none; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/pages/action/toast/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Toast 轻提示组件展示' 3 | } -------------------------------------------------------------------------------- /src/pages/action/toast/index.scss: -------------------------------------------------------------------------------- 1 | .toast-page .example__body { 2 | &-button { 3 | display: inline-block; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/action/toast/index.vue: -------------------------------------------------------------------------------- 1 | 89 | 90 | -------------------------------------------------------------------------------- /src/pages/advanced/calendar/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: '日历组件展示' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/advanced/calendar/index.scss: -------------------------------------------------------------------------------- 1 | .calendar-page .body_controllers { 2 | margin-top: 20px; 3 | text-align: center; 4 | 5 | .at-button { 6 | font-size: 24px; 7 | border-radius: 0; 8 | 9 | + .at-button { 10 | border-left: none; 11 | } 12 | 13 | &:first-child { 14 | border-top-left-radius: 8px; 15 | border-bottom-left-radius: 8px; 16 | 17 | // prettier-ignore 18 | border-left: 1PX solid #dcdfe6; 19 | } 20 | 21 | &:last-child { 22 | border-top-right-radius: 8px; 23 | border-bottom-right-radius: 8px; 24 | } 25 | } 26 | } 27 | 28 | .test { 29 | margin-left: 20px; 30 | } -------------------------------------------------------------------------------- /src/pages/advanced/calendar/index.vue: -------------------------------------------------------------------------------- 1 | 100 | 101 | -------------------------------------------------------------------------------- /src/pages/advanced/skeleton/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: '骨架组件展示' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/advanced/skeleton/index.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 73 | 74 | -------------------------------------------------------------------------------- /src/pages/advanced/virtual-scroll/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: '长列表组件展示' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/advanced/virtual-scroll/index.scss: -------------------------------------------------------------------------------- 1 | .example-item__desc{ 2 | margin-top: 12px; 3 | margin-bottom: 12px; 4 | color: #333; 5 | font-size: 24px; 6 | } 7 | 8 | .at-switch__title { 9 | font-size: 24px; 10 | color: red; 11 | } -------------------------------------------------------------------------------- /src/pages/basic/button/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/basic/button/index.scss: -------------------------------------------------------------------------------- 1 | .my-button.at-button { 2 | color: red; 3 | } 4 | 5 | .panel__content { 6 | &.demo-button { 7 | .at-form { 8 | padding-left: 0; 9 | } 10 | } 11 | 12 | .btn-demo-fab { 13 | position: fixed; 14 | right: 32px; 15 | bottom: 32px; 16 | z-index: 1100; 17 | } 18 | 19 | .btn-item { 20 | margin-bottom: 20px; 21 | 22 | &:last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | .subitem { 27 | display: inline-block; 28 | margin-left: 24px; 29 | 30 | &:first-child { 31 | margin-left: 0; 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/pages/basic/color/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/basic/color/index.scss: -------------------------------------------------------------------------------- 1 | .color-list { 2 | display: flex; 3 | justify-content: flex-start; 4 | align-items: flex-start; 5 | flex-wrap: wrap; 6 | } 7 | 8 | .color-item { 9 | margin-bottom: 40px; 10 | width: 33%; 11 | text-align: center; 12 | 13 | &__circle { 14 | position: relative; 15 | margin: 0 auto; 16 | width: 150px; 17 | height: 150px; 18 | background: #78a4fa; 19 | border-radius: 50%; 20 | 21 | .inner-circle-1 { 22 | position: absolute; 23 | top: 50%; 24 | left: 50%; 25 | margin-left: -50px; 26 | margin-top: -50px; 27 | width: 100px; 28 | height: 100px; 29 | background: #fff; 30 | border-radius: 50%; 31 | } 32 | 33 | .inner-circle-2 { 34 | position: absolute; 35 | top: 50%; 36 | left: 50%; 37 | margin-left: -32px; 38 | margin-top: -32px; 39 | width: 64px; 40 | height: 64px; 41 | border: 1px solid #78a4fa; 42 | border-radius: 50%; 43 | opacity: 0.3; 44 | } 45 | } 46 | 47 | &__info { 48 | margin-top: 20px; 49 | color: #88889c; 50 | font-size: 20px; 51 | text-align: center; 52 | 53 | .name, 54 | .hex { 55 | display: block; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/pages/basic/color/index.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 156 | -------------------------------------------------------------------------------- /src/pages/basic/icon/icons.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | 'main': [ 3 | 'analytics', 4 | 'bell', 5 | 'blocked', 6 | 'bookmark', 7 | 'bullet-list', 8 | 'calendar', 9 | 'add-circle', 10 | 'subtract-circle', 11 | 'check-circle', 12 | 'close-circle', 13 | 'add', 14 | 'subtract', 15 | 'check', 16 | 'close', 17 | 'clock', 18 | 'credit-card', 19 | 'download-cloud', 20 | 'download', 21 | 'equalizer', 22 | 'external-link', 23 | 'eye', 24 | 'filter', 25 | 'folder', 26 | 'heart', 27 | 'heart-2', 28 | 'star', 29 | 'star-2', 30 | 'help', 31 | 'alert-circle', 32 | 'home', 33 | 'iphone-x', 34 | 'iphone', 35 | 'lightning-bolt', 36 | 'link', 37 | 'list', 38 | 'lock', 39 | 'mail', 40 | 'map-pin', 41 | 'menu', 42 | 'message', 43 | 'money', 44 | 'numbered-list', 45 | 'phone', 46 | 'search', 47 | 'settings', 48 | 'share-2', 49 | 'share', 50 | 'shopping-bag-2', 51 | 'shopping-bag', 52 | 'shopping-cart', 53 | 'streaming', 54 | 'tag', 55 | 'tags', 56 | 'trash', 57 | 'upload', 58 | 'user', 59 | 'loading', 60 | 'loading-2', 61 | 'loading-3' 62 | ], 63 | 'file': [ 64 | 'file-audio', 65 | 'file-code', 66 | 'file-generic', 67 | 'file-jpg', 68 | 'file-new', 69 | 'file-png', 70 | 'file-svg', 71 | 'file-video' 72 | ], 73 | 'text': [ 74 | 'align-center', 75 | 'align-left', 76 | 'align-right', 77 | 'edit', 78 | 'font-color', 79 | 'text-italic', 80 | 'text-strikethrough', 81 | 'text-underline' 82 | ], 83 | 'arrow': [ 84 | 'arrow-up', 85 | 'arrow-down', 86 | 'arrow-left', 87 | 'arrow-right', 88 | 'chevron-up', 89 | 'chevron-down', 90 | 'chevron-left', 91 | 'chevron-right' 92 | ], 93 | 'media': [ 94 | 'play', 95 | 'pause', 96 | 'stop', 97 | 'prev', 98 | 'next', 99 | 'reload', 100 | 'repeat-play', 101 | 'shuffle-play', 102 | 'playlist', 103 | 'sound', 104 | 'volume-off', 105 | 'volume-minus', 106 | 'volume-plus' 107 | ], 108 | 'photo': [ 109 | 'camera', 110 | 'image', 111 | 'video' 112 | ], 113 | 'logo': [ 114 | 'sketch' 115 | ] 116 | } 117 | -------------------------------------------------------------------------------- /src/pages/basic/icon/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/basic/icon/index.scss: -------------------------------------------------------------------------------- 1 | .icon-list { 2 | display: flex; 3 | justify-content: flex-start; 4 | align-items: flex-start; 5 | flex-wrap: wrap; 6 | 7 | &__item { 8 | margin-bottom: 60px; 9 | width: 33%; 10 | text-align: center; 11 | } 12 | 13 | &__name { 14 | margin-top: 20px; 15 | color: #88889c; 16 | font-size: 20px; 17 | text-align: center; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/pages/basic/icon/index.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 59 | -------------------------------------------------------------------------------- /src/pages/basic/typo/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/basic/typo/index.scss: -------------------------------------------------------------------------------- 1 | .table-typo { 2 | padding: 0 28px; 3 | 4 | &__head { 5 | padding: 20px 32px; 6 | color: #afb9cc; 7 | font-size: 28px; 8 | border: 1px solid #c4d9e7; 9 | border-radius: 8px; 10 | 11 | .thead { 12 | display: inline-block; 13 | 14 | &:nth-child(1) { 15 | width: 44%; 16 | } 17 | 18 | &:nth-child(2) { 19 | width: 18%; 20 | } 21 | } 22 | } 23 | 24 | &__body { 25 | margin-top: 20px; 26 | } 27 | 28 | &__line { 29 | margin-top: 20px; 30 | padding: 0 32px; 31 | display: flex; 32 | align-items: center; 33 | height: 80px; 34 | color: #354052; 35 | font-size: 28px; 36 | 37 | &:nth-child(2n + 1) { 38 | background-color: #fafbfc; 39 | } 40 | 41 | .col { 42 | display: inline-block; 43 | 44 | &:nth-child(1) { 45 | width: 44%; 46 | } 47 | 48 | &:nth-child(2) { 49 | width: 18%; 50 | } 51 | 52 | &.h0 { 53 | font-size: 40px; 54 | } 55 | 56 | &.h1 { 57 | font-size: 36px; 58 | } 59 | 60 | &.h2 { 61 | font-size: 32px; 62 | } 63 | 64 | &.h3 { 65 | font-size: 28px; 66 | } 67 | 68 | &.h4 { 69 | font-size: 24px; 70 | } 71 | 72 | &.h5 { 73 | font-size: 20px; 74 | } 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/pages/basic/typo/index.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 50 | -------------------------------------------------------------------------------- /src/pages/form/checkbox/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/checkbox/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/form/checkbox/index.scss -------------------------------------------------------------------------------- /src/pages/form/form/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/form/index.scss: -------------------------------------------------------------------------------- 1 | .component-item { 2 | &__btn-group { 3 | padding: 0 20px; 4 | 5 | &__btn-item { 6 | margin-bottom: 20px; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/form/form/index.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 126 | -------------------------------------------------------------------------------- /src/pages/form/image-picker/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/image-picker/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/form/image-picker/index.scss -------------------------------------------------------------------------------- /src/pages/form/image-picker/index.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 129 | -------------------------------------------------------------------------------- /src/pages/form/input-number/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/input-number/index.scss: -------------------------------------------------------------------------------- 1 | .example--item { 2 | margin-bottom: 24px; 3 | 4 | &:last-child { 5 | margin-bottom: 0; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/pages/form/input-number/index.vue: -------------------------------------------------------------------------------- 1 | 100 | 101 | -------------------------------------------------------------------------------- /src/pages/form/input/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Input 组件展示' 3 | } -------------------------------------------------------------------------------- /src/pages/form/input/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/form/input/index.scss -------------------------------------------------------------------------------- /src/pages/form/picker-view/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/picker-view/index.scss: -------------------------------------------------------------------------------- 1 | .example-item { 2 | .title-date { 3 | margin: 40px 0 20px; 4 | text-align: center; 5 | font-size: 36px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/pages/form/picker-view/index.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | -------------------------------------------------------------------------------- /src/pages/form/picker/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/picker/index.scss: -------------------------------------------------------------------------------- 1 | 2 | .picker__page .example-item { 3 | .at-list__item .item-extra__info { 4 | max-width: 300px; 5 | } 6 | } 7 | 8 | .demo-list-item { 9 | position: relative; 10 | display: flex; 11 | justify-content: space-between; 12 | padding: 24px; 13 | 14 | &::before, 15 | &::after { 16 | content: ''; 17 | position: absolute; 18 | top: auto; 19 | left: 0; 20 | right: 0; 21 | bottom: 0; 22 | transform: scaleY(0.5); 23 | border-bottom: 1PX solid #d6e4ef; 24 | transform-origin: center; 25 | box-sizing: border-box; 26 | pointer-events: none; 27 | } 28 | 29 | &::before { 30 | top: 0; 31 | bottom: auto; 32 | } 33 | 34 | &__label, 35 | &__value { 36 | color: #333; 37 | font-size: 32px; 38 | line-height: 1.5; 39 | } 40 | 41 | &__value { 42 | color: #999; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/pages/form/picker/index.vue: -------------------------------------------------------------------------------- 1 | 84 | 85 | 150 | -------------------------------------------------------------------------------- /src/pages/form/radio/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/radio/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/form/radio/index.scss -------------------------------------------------------------------------------- /src/pages/form/radio/index.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | -------------------------------------------------------------------------------- /src/pages/form/range/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/range/index.scss: -------------------------------------------------------------------------------- 1 | .example-item { 2 | color: #333; 3 | font-size: 28px; 4 | // padding: 0 28px; 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/form/range/index.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 64 | -------------------------------------------------------------------------------- /src/pages/form/rate/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/rate/index.scss: -------------------------------------------------------------------------------- 1 | .example-item { 2 | color: #333; 3 | font-size: 28px; 4 | } 5 | -------------------------------------------------------------------------------- /src/pages/form/rate/index.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | -------------------------------------------------------------------------------- /src/pages/form/search-bar/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/search-bar/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/form/search-bar/index.scss -------------------------------------------------------------------------------- /src/pages/form/search-bar/index.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | -------------------------------------------------------------------------------- /src/pages/form/slider/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/slider/index.scss: -------------------------------------------------------------------------------- 1 | .panel__content .example-item__desc { 2 | margin-left: 18PX; 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/form/slider/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /src/pages/form/switch/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/switch/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/form/switch/index.scss -------------------------------------------------------------------------------- /src/pages/form/switch/index.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | -------------------------------------------------------------------------------- /src/pages/form/textarea/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/form/textarea/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/form/textarea/index.scss -------------------------------------------------------------------------------- /src/pages/form/textarea/index.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | -------------------------------------------------------------------------------- /src/pages/index/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/index/index.scss: -------------------------------------------------------------------------------- 1 | .page { 2 | position: relative; 3 | background-color: #f8f8f8; 4 | 5 | view { 6 | box-sizing: border-box; 7 | } 8 | } 9 | 10 | .page-index { 11 | padding-top: 60px; 12 | padding-bottom: 100px; 13 | 14 | .logo { 15 | margin: 0 auto; 16 | margin-top: 60px; 17 | font-size: 0; 18 | text-align: center; 19 | } 20 | .img { 21 | width: 264px; 22 | height: 180px; 23 | } 24 | .page-title { 25 | margin-top: 24px; 26 | color: #333; 27 | font-size: 36px; 28 | text-align: center; 29 | } 30 | 31 | .module-list { 32 | margin-top: 72px; 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | 37 | &__item { 38 | box-sizing: border-box; 39 | display: flex; 40 | flex-direction: row; 41 | align-items: center; 42 | margin-bottom: 40px; 43 | padding: 0 30px; 44 | width: 90%; 45 | height: 144px; 46 | background: #fff; 47 | box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.04); 48 | border-radius: 10px; 49 | 50 | &:last-child { 51 | margin-bottom: 0; 52 | } 53 | } 54 | 55 | &__icon { 56 | display: flex; 57 | justify-content: center; 58 | align-items: center; 59 | width: 70px; 60 | height: 70px; 61 | color: #78a4fa; 62 | text-align: center; 63 | border: 5px solid rgba(120, 164, 250, 0.16); 64 | border-radius: 50%; 65 | 66 | .img { 67 | width: 30px; 68 | height: 30px; 69 | } 70 | } 71 | 72 | &__info { 73 | flex: 1; 74 | text-align: left; 75 | margin-left: 24px; 76 | 77 | .title { 78 | color: #6a6a77; 79 | font-size: 28px; 80 | font-weight: bold; 81 | } 82 | 83 | .content { 84 | color: #88889c; 85 | font-size: 22px; 86 | } 87 | } 88 | 89 | &__arrow { 90 | display: flex; 91 | justify-content: center; 92 | align-items: center; 93 | width: 62px; 94 | height: 62px; 95 | color: #fff; 96 | text-align: center; 97 | background: #78a4fa; 98 | box-shadow: 4px 10px 30px 0 rgba(120, 164, 250, 0.3); 99 | border-radius: 50%; 100 | } 101 | } 102 | } 103 | 104 | .page-body { 105 | padding: 40px; 106 | } 107 | 108 | .component-group { 109 | font-size: 32px; 110 | } 111 | 112 | .group-item { 113 | padding: 0 30px; 114 | margin: 20px 0; 115 | background-color: #fff; 116 | border-radius: 4px; 117 | overflow: hidden; 118 | 119 | &:first-child { 120 | margin-top: 0; 121 | } 122 | } 123 | 124 | .group-info { 125 | padding: 30px 0; 126 | display: flex; 127 | align-items: center; 128 | transition: opacity 0.3s; 129 | 130 | &-title { 131 | opacity: 0.5; 132 | } 133 | } 134 | 135 | .group-list { 136 | font-size: 28px; 137 | 138 | .list-component { 139 | padding: 20px 0; 140 | position: relative; 141 | align-items: center; 142 | 143 | &::before { 144 | content: ' '; 145 | position: absolute; 146 | left: 0; 147 | top: 0; 148 | right: 0; 149 | height: 1px; 150 | border-top: 1px solid #d8d8d8; 151 | color: #d8d8d8; 152 | } 153 | 154 | &:first-child::before { 155 | display: none; 156 | } 157 | 158 | &-info { 159 | width: 100%; 160 | } 161 | 162 | &-arrow { 163 | display: inline-block; 164 | height: 18px; 165 | width: 18px; 166 | border-width: 2px 2px 0 0; 167 | border-color: #888; 168 | border-style: solid; 169 | transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) translate(-50%); 170 | position: absolute; 171 | top: 50%; 172 | right: 0; 173 | } 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /src/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 144 | -------------------------------------------------------------------------------- /src/pages/layout/accordion/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/layout/accordion/index.vue: -------------------------------------------------------------------------------- 1 | 112 | 113 | 138 | -------------------------------------------------------------------------------- /src/pages/layout/card/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/layout/card/index.vue: -------------------------------------------------------------------------------- 1 | 100 | 101 | -------------------------------------------------------------------------------- /src/pages/layout/flex/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/layout/flex/index.scss: -------------------------------------------------------------------------------- 1 | @import 'taro-ui-vue3/dist/style/variables/default.scss'; 2 | @import 'taro-ui-vue3/dist/style/components/flex.scss'; 3 | 4 | .flex-page .at-row { 5 | margin-bottom: 40px; 6 | height: 100%; 7 | 8 | .at-col { 9 | padding: $spacing-v-md $spacing-h-md; 10 | color: $color-white; 11 | font-size: $font-size-base; 12 | text-align: center; 13 | 14 | &:nth-child(odd) { 15 | background-color: $color-brand-light; 16 | } 17 | 18 | &:nth-child(even) { 19 | background-color: tint($color-brand-light, 20%); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/pages/layout/flex/index.vue: -------------------------------------------------------------------------------- 1 | 149 | 150 | 159 | -------------------------------------------------------------------------------- /src/pages/layout/float-layout/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/layout/float-layout/index.vue: -------------------------------------------------------------------------------- 1 | 94 | 95 | -------------------------------------------------------------------------------- /src/pages/layout/grid/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/layout/grid/index.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | -------------------------------------------------------------------------------- /src/pages/layout/list/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/navigation/drawer/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/navigation/drawer/index.scss: -------------------------------------------------------------------------------- 1 | .page { 2 | background-color: #fff; 3 | } 4 | 5 | .example { 6 | margin-bottom: 15px; 7 | text-align: center; 8 | } 9 | 10 | .drawer-item { 11 | height: 80px; 12 | line-height: 80px; 13 | margin: 0 25px; 14 | color: #666; 15 | font-size: 30px; 16 | border-bottom: 1px solid #eee; 17 | position: relative; 18 | 19 | .at-icon { 20 | position: absolute; 21 | right: 5px; 22 | top: 25px; 23 | } 24 | 25 | .at-badge { 26 | position: absolute; 27 | right: 5px; 28 | top: 25px; 29 | 30 | .at-icon { 31 | position: static; 32 | margin-top: -45px; 33 | } 34 | } 35 | 36 | &--sub { 37 | font-size: 26px; 38 | margin-left: 50px; 39 | color: #999; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/pages/navigation/drawer/index.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 147 | -------------------------------------------------------------------------------- /src/pages/navigation/indexes/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/navigation/indexes/index.scss: -------------------------------------------------------------------------------- 1 | .example-item { 2 | color: #333; 3 | font-size: 28px; 4 | } 5 | 6 | .custom-area { 7 | padding: 80px 20px; 8 | font-size: 28px; 9 | text-align: center; 10 | background: #fcfcfc; 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/navigation/indexes/index.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 83 | -------------------------------------------------------------------------------- /src/pages/navigation/navbar/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/navigation/navbar/index.scss: -------------------------------------------------------------------------------- 1 | .example__body { 2 | background-color: #f8f8f8; 3 | min-height: 100px; 4 | 5 | .item { 6 | margin-bottom: 10px; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/navigation/navbar/index.vue: -------------------------------------------------------------------------------- 1 | 121 | 122 | 175 | -------------------------------------------------------------------------------- /src/pages/navigation/pagination/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/navigation/pagination/index.scss: -------------------------------------------------------------------------------- 1 | .btn-item { 2 | margin-top: 30px; 3 | color: #666; 4 | font-size: 24px; 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /src/pages/navigation/pagination/index.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 122 | -------------------------------------------------------------------------------- /src/pages/navigation/segmented-control/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/navigation/segmented-control/index.scss: -------------------------------------------------------------------------------- 1 | .tab-content { 2 | padding: 100px 50px; 3 | font-size: 30px; 4 | text-align: center; 5 | background-color: #fafbfc; 6 | } 7 | -------------------------------------------------------------------------------- /src/pages/navigation/segmented-control/index.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | -------------------------------------------------------------------------------- /src/pages/navigation/tabbar/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/navigation/tabbar/index.scss: -------------------------------------------------------------------------------- 1 | .example__body { 2 | background-color: #f8f8f8; 3 | min-height: 100px; 4 | padding: 30px 10px 80px; 5 | 6 | .item { 7 | margin-bottom: 10px; 8 | } 9 | 10 | .tab-content { 11 | font-size: 25px; 12 | padding: 20px; 13 | text-align: center; 14 | border-top: 2px solid #f8f8f8; 15 | background-color: #fff; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/pages/navigation/tabbar/index.vue: -------------------------------------------------------------------------------- 1 | 61 | 62 | 129 | -------------------------------------------------------------------------------- /src/pages/navigation/tabs/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/navigation/tabs/index.scss: -------------------------------------------------------------------------------- 1 | .tab-content { 2 | padding: 100px 50px; 3 | font-size: 30px; 4 | text-align: center; 5 | background-color: #fafbfc; 6 | } 7 | 8 | .tab-content--vertical { 9 | height: 100%; 10 | padding: 100px 50px; 11 | font-size: 30px; 12 | text-align: center; 13 | box-sizing: border-box; 14 | background-color: #fafbfc; 15 | } 16 | -------------------------------------------------------------------------------- /src/pages/navigation/tabs/index.vue: -------------------------------------------------------------------------------- 1 | 108 | 109 | 155 | -------------------------------------------------------------------------------- /src/pages/panel/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/panel/index.scss: -------------------------------------------------------------------------------- 1 | @import 'taro-ui-vue3/dist/style/mixins/index.scss'; 2 | @import 'taro-ui-vue3/dist/style/variables/default.scss'; 3 | 4 | /** 5 | * 分类页样式 6 | */ 7 | .panel-header { 8 | display: flex; 9 | align-items: center; 10 | padding: 60px; 11 | height: 180px; 12 | 13 | &__icon { 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | width: 80px; 18 | height: 80px; 19 | color: #78a4fa; 20 | text-align: center; 21 | background: #fff; 22 | box-shadow: 0 20px 80px 0 rgba(0, 0, 0, 0.11); 23 | border-radius: 10px; 24 | 25 | .img { 26 | width: 36px; 27 | height: 36px; 28 | } 29 | } 30 | 31 | &__title { 32 | margin-left: 32px; 33 | color: #78a4fa; 34 | font-size: 36px; 35 | font-weight: bold; 36 | } 37 | } 38 | 39 | .panel-body { 40 | min-height: calc(100vh - 180px); 41 | background: #fff; 42 | box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11); 43 | } 44 | 45 | .component-list { 46 | margin: 20px 60px 40px; 47 | 48 | &__item { 49 | display: flex; 50 | align-items: center; 51 | justify-content: space-between; 52 | height: 120px; 53 | @include hairline-bottom(); 54 | 55 | .name { 56 | color: #1d1d26; 57 | font-size: 28px; 58 | } 59 | 60 | .at-icon { 61 | color: #ccc; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/pages/view/article/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/article/index.scss: -------------------------------------------------------------------------------- 1 | @import 'taro-ui-vue3/dist/style/components/article.scss'; 2 | -------------------------------------------------------------------------------- /src/pages/view/article/index.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 58 | -------------------------------------------------------------------------------- /src/pages/view/avatar/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/avatar/index.scss: -------------------------------------------------------------------------------- 1 | .panel__content { 2 | .example-item { 3 | .subitem { 4 | margin-left: 32px; 5 | vertical-align: middle; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/view/avatar/index.vue: -------------------------------------------------------------------------------- 1 | 128 | 129 | 152 | -------------------------------------------------------------------------------- /src/pages/view/badge/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/badge/index.scss: -------------------------------------------------------------------------------- 1 | .panel__content { 2 | .badge-item { 3 | margin-bottom: 20px; 4 | 5 | &:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .subitem { 10 | display: inline-block; 11 | margin-left: 40px; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/pages/view/badge/index.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 71 | -------------------------------------------------------------------------------- /src/pages/view/countdown/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/countdown/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/view/countdown/index.scss -------------------------------------------------------------------------------- /src/pages/view/countdown/index.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 113 | -------------------------------------------------------------------------------- /src/pages/view/curtain/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/curtain/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/view/curtain/index.scss -------------------------------------------------------------------------------- /src/pages/view/curtain/index.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 89 | -------------------------------------------------------------------------------- /src/pages/view/divider/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/divider/index.scss: -------------------------------------------------------------------------------- 1 | .panel__content { 2 | .bar-item { 3 | margin-bottom: 20px; 4 | 5 | &:last-child { 6 | margin-bottom: 0; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/view/divider/index.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 79 | -------------------------------------------------------------------------------- /src/pages/view/load-more/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/load-more/index.scss: -------------------------------------------------------------------------------- 1 | .panel__content { 2 | .bar-item { 3 | margin-bottom: 20px; 4 | 5 | &:last-child { 6 | margin-bottom: 0; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/view/load-more/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /src/pages/view/noticebar/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/noticebar/index.scss: -------------------------------------------------------------------------------- 1 | .panel__content { 2 | .bar-item { 3 | margin-bottom: 20px; 4 | 5 | &:last-child { 6 | margin-bottom: 0; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/view/steps/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/steps/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/view/steps/index.scss -------------------------------------------------------------------------------- /src/pages/view/steps/index.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 166 | -------------------------------------------------------------------------------- /src/pages/view/swiper/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/swiper/index.scss: -------------------------------------------------------------------------------- 1 | .example-item { 2 | .control-cnt { 3 | margin-top: 40px; 4 | } 5 | 6 | .slider-list { 7 | margin-top: 80px; 8 | 9 | &__item { 10 | margin-bottom: 40px; 11 | 12 | &-header { 13 | margin-bottom: 16px; 14 | color: #999; 15 | font-size: 28px; 16 | text-align: center; 17 | } 18 | } 19 | } 20 | 21 | .slide-image { 22 | width: 100%; 23 | height: 360px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/pages/view/swiper/index.vue: -------------------------------------------------------------------------------- 1 | 93 | 94 | 159 | -------------------------------------------------------------------------------- /src/pages/view/tag/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/tag/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/view/tag/index.scss -------------------------------------------------------------------------------- /src/pages/view/timeline/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: 'Taro UI Vue3' 3 | } -------------------------------------------------------------------------------- /src/pages/view/timeline/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/b2nil/taro-ui-vue3-demo/7ba526447680f8c515734ef5d48ddef7ed2ff989/src/pages/view/timeline/index.scss -------------------------------------------------------------------------------- /src/pages/view/timeline/index.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 100 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import { defineComponent } from "vue"; 3 | const Component: ReturnType; 4 | export default Component; 5 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "module": "commonjs", 5 | "removeComments": false, 6 | "preserveConstEnums": true, 7 | "moduleResolution": "node", 8 | "experimentalDecorators": true, 9 | "noImplicitAny": false, 10 | "allowSyntheticDefaultImports": true, 11 | "outDir": "lib", 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": false, 14 | "strictNullChecks": true, 15 | "sourceMap": true, 16 | "baseUrl": ".", 17 | "rootDir": ".", 18 | "jsx": "react", 19 | "allowJs": true, 20 | "resolveJsonModule": true, 21 | "typeRoots": [ 22 | "node_modules/@types", 23 | "global.d.ts" 24 | ], 25 | "paths": { 26 | "@/components/*": [ 27 | "./src/components/*" 28 | ], 29 | "@/utils/*": [ 30 | "./src/utils/*" 31 | ], 32 | "@/style/*": [ 33 | "./src/style/*" 34 | ], 35 | "@/assets/*": [ 36 | "./src/assets/*" 37 | ], 38 | } 39 | }, 40 | "exclude": [ 41 | "node_modules", 42 | "dist" 43 | ], 44 | "compileOnSave": false 45 | } --------------------------------------------------------------------------------