├── .babelrc ├── src ├── components │ ├── rate │ │ ├── index.js │ │ └── src │ │ │ └── rate.vue │ ├── icons │ │ ├── index.js │ │ └── src │ │ │ └── icons.vue │ ├── input │ │ └── index.js │ ├── popup │ │ └── index.js │ ├── backtop │ │ ├── index.js │ │ └── src │ │ │ └── backtop.vue │ ├── badge │ │ ├── index.js │ │ └── src │ │ │ └── badge.vue │ ├── countup │ │ └── index.js │ ├── layout │ │ ├── index.js │ │ └── src │ │ │ └── layout.vue │ ├── search │ │ └── index.js │ ├── spinner │ │ └── index.js │ ├── switch │ │ ├── index.js │ │ └── src │ │ │ └── switch.vue │ ├── datetime │ │ └── index.js │ ├── keyboard │ │ └── index.js │ ├── sendcode │ │ └── index.js │ ├── textarea │ │ ├── index.js │ │ └── src │ │ │ └── textarea.vue │ ├── countdown │ │ └── index.js │ ├── cityselect │ │ └── index.js │ ├── actionsheet │ │ ├── index.js │ │ └── src │ │ │ └── actionsheet.vue │ ├── progressbar │ │ └── index.js │ ├── pullrefresh │ │ └── index.js │ ├── infinitescroll │ │ ├── index.js │ │ └── src │ │ │ └── loading.vue │ ├── tab │ │ ├── index.js │ │ └── src │ │ │ └── tab-panel.vue │ ├── step │ │ ├── index.js │ │ └── src │ │ │ ├── step-item.vue │ │ │ └── step.vue │ ├── radio │ │ ├── index.js │ │ └── src │ │ │ ├── radio.vue │ │ │ └── radio-group.vue │ ├── slider │ │ ├── index.js │ │ └── src │ │ │ └── slider-item.vue │ ├── button │ │ ├── index.js │ │ └── src │ │ │ └── button-group.vue │ ├── cell │ │ ├── index.js │ │ └── src │ │ │ ├── cell-group.vue │ │ │ └── cell-item.vue │ ├── flexbox │ │ ├── index.js │ │ └── src │ │ │ ├── flexbox.vue │ │ │ └── flexbox-item.vue │ ├── grids │ │ ├── index.js │ │ └── src │ │ │ ├── grids-group.vue │ │ │ └── grids-item.vue │ ├── timeline │ │ ├── index.js │ │ └── src │ │ │ ├── timeline.vue │ │ │ └── timeline-item.vue │ ├── checkbox │ │ ├── index.js │ │ └── src │ │ │ └── checkbox-group.vue │ ├── accordion │ │ ├── index.js │ │ └── src │ │ │ ├── accordion.vue │ │ │ └── accordion-item.vue │ ├── checklist │ │ ├── index.js │ │ └── src │ │ │ ├── checklist-item.vue │ │ │ └── checklist.vue │ ├── rollnotice │ │ ├── index.js │ │ └── src │ │ │ └── rollnotice-item.vue │ ├── scrollnav │ │ ├── index.js │ │ └── src │ │ │ └── scrollnav-panel.vue │ ├── scrolltab │ │ ├── index.js │ │ └── src │ │ │ └── scrolltab-panel.vue │ ├── list │ │ ├── index.js │ │ └── src │ │ │ ├── list-other.vue │ │ │ ├── list-theme.vue │ │ │ └── list-item.vue │ ├── tabbar │ │ ├── index.js │ │ └── src │ │ │ ├── tabbar-other.vue │ │ │ └── tabbar-item.vue │ ├── lightbox │ │ ├── index.js │ │ └── src │ │ │ ├── lightbox-img.vue │ │ │ ├── lightbox-txt.vue │ │ │ └── lightbox.vue │ ├── navbar │ │ ├── index.js │ │ └── src │ │ │ ├── navbar-back-icon.vue │ │ │ ├── navbar-next-icon.vue │ │ │ └── navbar.vue │ ├── preview │ │ ├── index.js │ │ └── src │ │ │ ├── yd-preview-item.vue │ │ │ ├── yd-preview-header.vue │ │ │ └── yd-preview.vue │ ├── dialog │ │ ├── index.js │ │ └── src │ │ │ ├── loading │ │ │ ├── loading.vue │ │ │ └── index.js │ │ │ ├── notify │ │ │ ├── notify.vue │ │ │ └── index.js │ │ │ ├── alert │ │ │ ├── alert.vue │ │ │ └── index.js │ │ │ ├── toast │ │ │ ├── toast.vue │ │ │ └── index.js │ │ │ └── confirm │ │ │ ├── index.js │ │ │ └── confirm.vue │ └── mask │ │ └── src │ │ └── mask.vue ├── styles │ ├── base.less │ ├── components │ │ ├── mask.less │ │ ├── progressbar.less │ │ ├── rate.less │ │ ├── textarea.less │ │ ├── flexbox.less │ │ ├── backtop.less │ │ ├── rollnotice.less │ │ ├── infinitescroll.less │ │ ├── layout.less │ │ ├── actionsheet.less │ │ ├── badge.less │ │ ├── radio.less │ │ ├── accordion.less │ │ ├── popup.less │ │ ├── checkbox.less │ │ ├── input.less │ │ ├── tabbar.less │ │ ├── switch.less │ │ ├── slider.less │ │ ├── spinner.less │ │ ├── checklist.less │ │ ├── timeline.less │ │ ├── navbar.less │ │ ├── search.less │ │ ├── scrolltab.less │ │ ├── grids.less │ │ ├── tab.less │ │ ├── lightbox.less │ │ ├── preview.less │ │ └── datetime.less │ └── common │ │ ├── reset.less │ │ └── variables.less └── ydui.flexible.js ├── .gitignore ├── example ├── app.vue ├── routers │ ├── asidebar.vue │ ├── backtop.vue │ ├── cr.vue │ ├── slider.vue │ ├── step.vue │ ├── timeline.vue │ ├── icons.vue │ ├── scrolltab.vue │ ├── preview.vue │ ├── keyboard.vue │ ├── list.vue │ ├── scrollnav.vue │ ├── button.vue │ ├── cityselect.vue │ ├── search.vue │ ├── rollnotice.vue │ ├── lightbox.vue │ ├── sendcode.vue │ ├── countdown.vue │ ├── actionsheet.vue │ ├── navbar.vue │ ├── progressbar.vue │ ├── accordion.vue │ ├── badge.vue │ ├── switch.vue │ ├── popup.vue │ ├── rate.vue │ ├── grids.vue │ └── radio.vue └── index.html ├── .editorconfig ├── ISSUE_TEMPLATE.md ├── dist ├── ydui.flexible.js ├── lib.px │ └── countdown │ │ └── index.js └── lib.rem │ └── countdown │ └── index.js ├── LICENSE ├── package.json └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015"] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/components/rate/index.js: -------------------------------------------------------------------------------- 1 | import Rate from './src/rate.vue'; 2 | export {Rate}; 3 | -------------------------------------------------------------------------------- /src/components/icons/index.js: -------------------------------------------------------------------------------- 1 | import Icons from './src/icons.vue'; 2 | export {Icons}; 3 | -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './src/input.vue'; 2 | export {Input}; 3 | -------------------------------------------------------------------------------- /src/components/popup/index.js: -------------------------------------------------------------------------------- 1 | import Popup from './src/popup.vue'; 2 | export {Popup}; 3 | -------------------------------------------------------------------------------- /src/components/backtop/index.js: -------------------------------------------------------------------------------- 1 | import BackTop from './src/backtop.vue'; 2 | export {BackTop}; 3 | -------------------------------------------------------------------------------- /src/components/badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './src/badge.vue'; 2 | 3 | export {Badge}; 4 | -------------------------------------------------------------------------------- /src/components/countup/index.js: -------------------------------------------------------------------------------- 1 | import CountUp from './src/countup.vue'; 2 | export {CountUp}; 3 | -------------------------------------------------------------------------------- /src/components/layout/index.js: -------------------------------------------------------------------------------- 1 | import Layout from './src/layout.vue'; 2 | export {Layout}; 3 | -------------------------------------------------------------------------------- /src/components/search/index.js: -------------------------------------------------------------------------------- 1 | import Search from './src/search.vue'; 2 | export {Search}; 3 | -------------------------------------------------------------------------------- /src/components/spinner/index.js: -------------------------------------------------------------------------------- 1 | import Spinner from './src/spinner.vue'; 2 | export {Spinner}; 3 | -------------------------------------------------------------------------------- /src/components/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './src/switch.vue'; 2 | export {Switch}; 3 | -------------------------------------------------------------------------------- /src/components/datetime/index.js: -------------------------------------------------------------------------------- 1 | import DateTime from './src/datetime.vue'; 2 | export {DateTime}; 3 | -------------------------------------------------------------------------------- /src/components/keyboard/index.js: -------------------------------------------------------------------------------- 1 | import KeyBoard from './src/keyboard.vue'; 2 | export {KeyBoard}; 3 | -------------------------------------------------------------------------------- /src/components/sendcode/index.js: -------------------------------------------------------------------------------- 1 | import SendCode from './src/sendcode.vue'; 2 | export {SendCode}; 3 | -------------------------------------------------------------------------------- /src/components/textarea/index.js: -------------------------------------------------------------------------------- 1 | import TextArea from './src/textarea.vue'; 2 | export {TextArea}; 3 | -------------------------------------------------------------------------------- /src/components/countdown/index.js: -------------------------------------------------------------------------------- 1 | import CountDown from './src/countdown.vue'; 2 | export {CountDown}; 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | .DS_Store 3 | node_modules/ 4 | npm-debug.log 5 | /.idea 6 | /single.html 7 | -------------------------------------------------------------------------------- /src/components/cityselect/index.js: -------------------------------------------------------------------------------- 1 | import CitySelect from './src/cityselect.vue'; 2 | export {CitySelect}; 3 | -------------------------------------------------------------------------------- /src/components/actionsheet/index.js: -------------------------------------------------------------------------------- 1 | import ActionSheet from './src/actionsheet.vue'; 2 | export {ActionSheet}; 3 | -------------------------------------------------------------------------------- /src/components/progressbar/index.js: -------------------------------------------------------------------------------- 1 | import ProgressBar from './src/progressbar.vue'; 2 | export {ProgressBar}; 3 | -------------------------------------------------------------------------------- /src/components/pullrefresh/index.js: -------------------------------------------------------------------------------- 1 | import PullRefresh from './src/pullrefresh.vue'; 2 | export {PullRefresh}; 3 | -------------------------------------------------------------------------------- /src/components/infinitescroll/index.js: -------------------------------------------------------------------------------- 1 | import InfiniteScroll from './src/infinitescroll.vue'; 2 | export {InfiniteScroll}; 3 | -------------------------------------------------------------------------------- /src/components/tab/index.js: -------------------------------------------------------------------------------- 1 | import Tab from './src/tab.vue'; 2 | import TabPanel from './src/tab-panel.vue'; 3 | 4 | export {Tab, TabPanel}; 5 | -------------------------------------------------------------------------------- /src/components/step/index.js: -------------------------------------------------------------------------------- 1 | import Step from './src/step.vue'; 2 | import StepItem from './src/step-item.vue'; 3 | 4 | export {Step, StepItem}; 5 | -------------------------------------------------------------------------------- /src/components/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './src/radio.vue'; 2 | import RadioGroup from './src/radio-group.vue'; 3 | export {Radio, RadioGroup}; 4 | -------------------------------------------------------------------------------- /src/components/slider/index.js: -------------------------------------------------------------------------------- 1 | import Slider from './src/slider.vue'; 2 | import SliderItem from './src/slider-item.vue'; 3 | 4 | export {Slider, SliderItem}; 5 | -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './src/button.vue'; 2 | import ButtonGroup from './src/button-group.vue'; 3 | 4 | export {Button, ButtonGroup}; 5 | -------------------------------------------------------------------------------- /src/components/cell/index.js: -------------------------------------------------------------------------------- 1 | import CellItem from './src/cell-item.vue'; 2 | import CellGroup from './src/cell-group.vue'; 3 | 4 | export {CellItem, CellGroup}; 5 | -------------------------------------------------------------------------------- /src/components/flexbox/index.js: -------------------------------------------------------------------------------- 1 | import FlexBox from './src/flexbox.vue'; 2 | import FlexBoxItem from './src/flexbox-item.vue'; 3 | export {FlexBox, FlexBoxItem}; 4 | -------------------------------------------------------------------------------- /src/components/grids/index.js: -------------------------------------------------------------------------------- 1 | import GridsItem from './src/grids-item.vue'; 2 | import GridsGroup from './src/grids-group.vue'; 3 | 4 | export {GridsItem, GridsGroup}; 5 | -------------------------------------------------------------------------------- /src/components/timeline/index.js: -------------------------------------------------------------------------------- 1 | import TimeLine from './src/timeline.vue'; 2 | import TimeLineItem from './src/timeline-item.vue'; 3 | export {TimeLine, TimeLineItem}; 4 | -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import CheckBox from './src/checkbox.vue'; 2 | import CheckBoxGroup from './src/checkbox-group.vue'; 3 | export {CheckBox, CheckBoxGroup}; 4 | -------------------------------------------------------------------------------- /src/components/accordion/index.js: -------------------------------------------------------------------------------- 1 | import Accordion from './src/accordion.vue'; 2 | import AccordionItem from './src/accordion-item.vue'; 3 | export {Accordion, AccordionItem}; 4 | -------------------------------------------------------------------------------- /src/components/checklist/index.js: -------------------------------------------------------------------------------- 1 | import CheckList from './src/checklist.vue'; 2 | import CheckListItem from './src/checklist-item.vue'; 3 | export {CheckList, CheckListItem}; 4 | -------------------------------------------------------------------------------- /src/components/rollnotice/index.js: -------------------------------------------------------------------------------- 1 | import RollNotice from './src/rollnotice.vue'; 2 | import RollNoticeItem from './src/rollnotice-item.vue'; 3 | export {RollNotice, RollNoticeItem}; 4 | -------------------------------------------------------------------------------- /src/components/scrollnav/index.js: -------------------------------------------------------------------------------- 1 | import ScrollNav from './src/scrollnav.vue'; 2 | import ScrollNavPanel from './src/scrollnav-panel.vue'; 3 | 4 | export {ScrollNav, ScrollNavPanel}; 5 | -------------------------------------------------------------------------------- /src/components/scrolltab/index.js: -------------------------------------------------------------------------------- 1 | import ScrollTab from './src/scrolltab.vue'; 2 | import ScrollTabPanel from './src/scrolltab-panel.vue'; 3 | 4 | export {ScrollTab, ScrollTabPanel}; 5 | -------------------------------------------------------------------------------- /example/app.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /src/components/list/index.js: -------------------------------------------------------------------------------- 1 | import ListTheme from './src/list-theme.vue'; 2 | import ListItem from './src/list-item.vue'; 3 | import ListOther from './src/list-other.vue'; 4 | 5 | export {ListTheme, ListItem, ListOther}; 6 | -------------------------------------------------------------------------------- /src/components/tabbar/index.js: -------------------------------------------------------------------------------- 1 | import TabBar from './src/tabbar.vue'; 2 | import TabBarItem from './src/tabbar-item.vue'; 3 | import TabBarOther from './src/tabbar-other.vue'; 4 | 5 | export {TabBar, TabBarItem, TabBarOther}; 6 | -------------------------------------------------------------------------------- /src/components/lightbox/index.js: -------------------------------------------------------------------------------- 1 | import LightBox from './src/lightbox.vue'; 2 | import LightBoxImg from './src/lightbox-img.vue'; 3 | import LightBoxTxt from './src/lightbox-txt.vue'; 4 | export {LightBox, LightBoxImg, LightBoxTxt}; 5 | -------------------------------------------------------------------------------- /src/components/navbar/index.js: -------------------------------------------------------------------------------- 1 | import NavBar from './src/navbar.vue'; 2 | import NavBarBackIcon from './src/navbar-back-icon.vue'; 3 | import NavBarNextIcon from './src/navbar-next-icon.vue'; 4 | 5 | export {NavBar, NavBarBackIcon, NavBarNextIcon}; 6 | -------------------------------------------------------------------------------- /src/components/preview/index.js: -------------------------------------------------------------------------------- 1 | import Preview from './src/yd-preview.vue'; 2 | import PreviewHeader from './src/yd-preview-header.vue'; 3 | import PreviewItem from './src/yd-preview-item.vue'; 4 | 5 | export {Preview, PreviewHeader, PreviewItem} 6 | -------------------------------------------------------------------------------- /src/components/button/src/button-group.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /src/components/list/src/list-other.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './src/alert'; 2 | import Confirm from './src/confirm'; 3 | import Toast from './src/toast'; 4 | import Notify from './src/notify'; 5 | import Loading from './src/loading'; 6 | 7 | export { 8 | Confirm, 9 | Alert, 10 | Toast, 11 | Notify, 12 | Loading 13 | }; 14 | -------------------------------------------------------------------------------- /src/components/preview/src/yd-preview-item.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /src/components/preview/src/yd-preview-header.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /src/components/rollnotice/src/rollnotice-item.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | -------------------------------------------------------------------------------- /src/components/lightbox/src/lightbox-img.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | index_size = 2 7 | charset = utf-8 8 | end_of_line = lf 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | 16 | [*.js] 17 | index_size = 4 18 | 19 | [*.less] 20 | index_size = 2 21 | -------------------------------------------------------------------------------- /src/components/slider/src/slider-item.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | #### 问题描述 2 | 3 | 作者是个菜鸟，请详细地描述问题，不要一句话带过（特别是将描述放在标题上的），根据情况贴上代码 4 | 5 | 处理 issue 是件很耗精力的事，请提交 issue 前考虑一下是否把问题说清楚了 6 | 7 | #### 产生环境 8 | 9 | - **使用版本：- 10 | - **引入方式：CDN | NPM 11 | - **演示地址：- 12 | 13 | #### 提示错误信息 14 | 15 | 1. 16 | 2. ... 17 | 18 | #### 代码区域 19 | 20 | ```html 21 | 24 | ``` 25 | -------------------------------------------------------------------------------- /src/styles/base.less: -------------------------------------------------------------------------------- 1 | @import "./common/variables"; 2 | @import "./common/reset"; 3 | @import "./common/iconfont"; 4 | 5 | .g-fix-ios-overflow-scrolling-bug { 6 | /* 针对IOS 修复 css overflow scroll bug */ 7 | -webkit-overflow-scrolling: auto !important; 8 | } 9 | 10 | .g-fix-ios-prevent-scroll { 11 | overflow: hidden !important; 12 | position: fixed; 13 | width: 100%; 14 | } 15 | -------------------------------------------------------------------------------- /src/styles/components/mask.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-mask { 6 | position: fixed; 7 | bottom: 0; 8 | right: 0; 9 | left: 0; 10 | top: 0; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | pointer-events: none; 15 | transition: opacity .2s ease-in; 16 | opacity: 0; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/lightbox/src/lightbox-txt.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /src/components/timeline/src/timeline.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /src/components/scrollnav/src/scrollnav-panel.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /src/components/dialog/src/loading/loading.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | -------------------------------------------------------------------------------- /src/components/dialog/src/notify/notify.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | -------------------------------------------------------------------------------- /src/components/cell/src/cell-group.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | -------------------------------------------------------------------------------- /example/routers/asidebar.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /example/routers/backtop.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/styles/components/progressbar.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-progressbar { 6 | position: relative; 7 | color: #333; 8 | width: 100%; 9 | height: 100%; 10 | > svg { 11 | width: 100%; 12 | > path { 13 | transition: all 1s linear; 14 | } 15 | } 16 | &-content { 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | font-size: .3rem; 21 | transform: translate(-50%, -50%); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/timeline/src/timeline-item.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /src/styles/components/rate.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-rate { 6 | display: flex; 7 | align-items: center; 8 | a { 9 | &:after { 10 | content: '\E7AD'; 11 | font-family: @iconfont-inlay; 12 | font-size: inherit; 13 | color: inherit; 14 | } 15 | &.rate-active:after { 16 | content: '\E7AC'; 17 | } 18 | } 19 | &-text { 20 | color: #657180; 21 | margin-left: .1rem; 22 | font-size: .3rem; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/navbar/src/navbar-back-icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /src/components/navbar/src/navbar-next-icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /src/components/scrolltab/src/scrolltab-panel.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | -------------------------------------------------------------------------------- /dist/ydui.flexible.js: -------------------------------------------------------------------------------- 1 | !function(e){var t=e.document,n=t.documentElement,i="orientationchange"in e?"orientationchange":"resize",a=function e(){var t=n.getBoundingClientRect().width;return n.style.fontSize=5*Math.max(Math.min(t/750*20,11.2),8.55)+"px",e}();n.setAttribute("data-dpr",e.navigator.appVersion.match(/iphone/gi)?e.devicePixelRatio:1),/iP(hone|od|ad)/.test(e.navigator.userAgent)&&(t.documentElement.classList.add("ios"),parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1],10)>=8&&t.documentElement.classList.add("hairline")),t.addEventListener&&(e.addEventListener(i,a,!1),t.addEventListener("DOMContentLoaded",a,!1))}(window); -------------------------------------------------------------------------------- /example/routers/cr.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/components/tabbar/src/tabbar-other.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | -------------------------------------------------------------------------------- /src/styles/components/textarea.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-textarea { 5 | padding: .2rem 0; 6 | background-color: #fff; 7 | width: 100%; 8 | 9 | > textarea { 10 | border: none; 11 | width: 100%; 12 | display: block; 13 | height: 1.5rem; 14 | font-size: .26rem; 15 | color: inherit; 16 | background-color: transparent; 17 | } 18 | 19 | &-readonly { 20 | opacity: .3; 21 | } 22 | 23 | &-counter { 24 | font-size: .28rem; 25 | color: #B2B2B2; 26 | text-align: right; 27 | padding-top: .06rem; 28 | } 29 | } 30 | } 31 | 32 | -------------------------------------------------------------------------------- /src/styles/components/flexbox.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-flexbox { 5 | display: flex; 6 | align-items: center; 7 | &-horizontal { 8 | 9 | } 10 | &-vertical { 11 | flex-direction: column; 12 | height: 100%; 13 | .@{css-prefix}-flexbox-item { 14 | width: 100%; 15 | } 16 | } 17 | &-item { 18 | flex: 1; 19 | &-start { 20 | align-self: flex-start; 21 | justify-self: flex-end; 22 | } 23 | &-center { 24 | align-self: center; 25 | } 26 | &-end { 27 | align-self: flex-end; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/components/backtop.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-backtop { 6 | position: fixed; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | z-index: @base-zindex * 1000; 11 | 12 | &-inlay { 13 | border: 1px solid #C0C0C0; 14 | width: 1rem; 15 | height: 1rem; 16 | border-radius: 50%; 17 | background-color: rgba(255, 255, 255, .85); 18 | 19 | &:after { 20 | font-family: @iconfont-inlay; 21 | content: '\E788'; 22 | font-size: .5rem; 23 | color: #C0C0C0; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/styles/components/rollnotice.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-rollnotice { 5 | overflow: hidden; 6 | width: 100%; 7 | background-color: #fff; 8 | 9 | &-box { 10 | height: inherit; 11 | } 12 | 13 | &-align { 14 | &-left { 15 | justify-content: flex-start; 16 | } 17 | 18 | &-right { 19 | justify-content: flex-end; 20 | } 21 | 22 | &-center { 23 | justify-content: center; 24 | } 25 | } 26 | 27 | &-item { 28 | height: inherit; 29 | display: flex; 30 | align-items: center; 31 | justify-content: inherit; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/flexbox/src/flexbox.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/dialog/src/alert/alert.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/styles/components/infinitescroll.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-list-loading { 5 | padding: .1rem 0; 6 | text-align: center; 7 | font-size: .26rem; 8 | color: #999; 9 | height: .66rem; 10 | box-sizing: content-box; 11 | &-box { 12 | height: .66rem; 13 | overflow: hidden; 14 | line-height: .66rem; 15 | } 16 | img { 17 | height: .66rem; 18 | display: inline-block; 19 | } 20 | svg { 21 | width: .66rem; 22 | height: .66rem; 23 | } 24 | } 25 | 26 | &-list-donetip { 27 | font-size: .24rem; 28 | text-align: center; 29 | padding: .25rem 0; 30 | color: #777; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue YDUI 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/components/list/src/list-theme.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/components/dialog/src/loading/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import {pageScroll} from '../../../../utils/assist'; 3 | 4 | const LoadingConstructor = Vue.extend(require('./loading.vue')); 5 | 6 | const instance = new LoadingConstructor({ 7 | el: document.createElement('div') 8 | }); 9 | 10 | LoadingConstructor.prototype.open = (title) => { 11 | instance.title = title || '正在加载'; 12 | 13 | document.body.appendChild(instance.$el); 14 | 15 | pageScroll.lock(); 16 | }; 17 | 18 | LoadingConstructor.prototype.close = function () { 19 | const el = instance.$el; 20 | el.parentNode && el.parentNode.removeChild(el); 21 | 22 | pageScroll.unlock(); 23 | }; 24 | 25 | export default { 26 | open: instance.open, 27 | close: instance.close 28 | }; 29 | 30 | -------------------------------------------------------------------------------- /src/components/dialog/src/toast/toast.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 29 | -------------------------------------------------------------------------------- /src/components/flexbox/src/flexbox-item.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | -------------------------------------------------------------------------------- /example/routers/slider.vue: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /src/components/dialog/src/toast/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import {pageScroll} from '../../../../utils/assist'; 3 | 4 | const ToastConstructor = Vue.extend(require('./toast.vue')); 5 | 6 | const instance = new ToastConstructor({ 7 | el: document.createElement('div') 8 | }); 9 | 10 | ToastConstructor.prototype.closeToast = function () { 11 | const el = instance.$el; 12 | el.parentNode && el.parentNode.removeChild(el); 13 | 14 | pageScroll.unlock(); 15 | 16 | typeof this.callback === 'function' && this.callback(); 17 | }; 18 | 19 | const Toast = (options = {}) => { 20 | instance.mes = options.mes; 21 | instance.icon = options.icon; 22 | instance.timeout = ~~options.timeout || 2000; 23 | instance.callback = options.callback; 24 | 25 | document.body.appendChild(instance.$el); 26 | 27 | pageScroll.lock(); 28 | 29 | const timer = setTimeout(() => { 30 | clearTimeout(timer); 31 | instance.closeToast(); 32 | }, instance.timeout + 100); 33 | }; 34 | 35 | export default Toast; 36 | -------------------------------------------------------------------------------- /src/components/accordion/src/accordion.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /src/components/dialog/src/alert/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import {pageScroll} from '../../../../utils/assist'; 3 | 4 | const AlertConstructor = Vue.extend(require('./alert.vue')); 5 | 6 | 7 | const instance = new AlertConstructor({ 8 | el: document.createElement('div') 9 | }); 10 | 11 | const hashChange = function () { 12 | pageScroll.unlock(); 13 | 14 | const el = instance.$el; 15 | el.parentNode && el.parentNode.removeChild(el); 16 | }; 17 | 18 | AlertConstructor.prototype.closeAlert = function () { 19 | pageScroll.unlock(); 20 | 21 | const el = instance.$el; 22 | el.parentNode && el.parentNode.removeChild(el); 23 | 24 | window.removeEventListener("hashchange", hashChange); 25 | 26 | typeof this.callback === 'function' && this.callback(); 27 | }; 28 | 29 | const Alert = (options = {}) => { 30 | instance.mes = options.mes; 31 | instance.callback = options.callback; 32 | 33 | window.addEventListener("hashchange", hashChange); 34 | 35 | document.body.appendChild(instance.$el); 36 | 37 | pageScroll.lock(); 38 | }; 39 | 40 | export default Alert; 41 | -------------------------------------------------------------------------------- /src/components/layout/src/layout.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015-2017 YDCSS Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 9 | of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/preview/src/yd-preview.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /src/components/grids/src/grids-group.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 43 | -------------------------------------------------------------------------------- /src/styles/components/layout.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-view { 5 | margin: 0 auto; 6 | max-width: @max-width; 7 | min-width: @min-width; 8 | &:before { 9 | content: ''; 10 | display: block; 11 | width: 100%; 12 | height: @navbar-height; 13 | } 14 | &:after { 15 | content: ''; 16 | display: block; 17 | width: 100%; 18 | height: @body-padding-bottom * 3; 19 | } 20 | } 21 | 22 | &-flexview { 23 | height: 100%; 24 | display: flex; 25 | flex-direction: column; 26 | margin: 0 auto; 27 | max-width: @max-width; 28 | min-width: @min-width; 29 | } 30 | 31 | &-scrollview { 32 | width: 100%; 33 | height: 100%; 34 | flex: 1; 35 | overflow-y: auto; 36 | overflow-x: hidden; 37 | -webkit-overflow-scrolling: touch; 38 | position: relative; 39 | margin-bottom: -1px; 40 | 41 | &:after { 42 | content: ''; 43 | display: block; 44 | width: 100%; 45 | height: @body-padding-bottom; 46 | } 47 | } 48 | } 49 | 50 | .ios .@{css-prefix}-scrollview { 51 | margin-top: 1px; 52 | } 53 | 54 | .hairline .@{css-prefix}-scrollview { 55 | margin-top: 0.5px; 56 | } 57 | -------------------------------------------------------------------------------- /src/styles/components/actionsheet.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-actionsheet { 6 | text-align: center; 7 | position: fixed; 8 | bottom: 0; 9 | left: 0; 10 | width: 100%; 11 | z-index: @base-zindex * 1500 + 2; 12 | background-color: @actionsheet-bg; 13 | transform: translate(0, 100%); 14 | transition: transform .2s; 15 | &-active { 16 | transform: translate(0, 0); 17 | } 18 | } 19 | 20 | &-actionsheet-item { 21 | display: block; 22 | position: relative; 23 | font-size: @actionsheet-item-fontsize; 24 | color: @actionsheet-item-color; 25 | height: @actionsheet-item-height; 26 | line-height: @actionsheet-item-height; 27 | background-color: @actionsheet-item-bg; 28 | &:after { 29 | .bottom-line(@actionsheet-item-border-color, 2); 30 | } 31 | } 32 | 33 | &-actionsheet-action { 34 | display: block; 35 | margin-top: .15rem; 36 | font-size: @actionsheet-action-fontsize; 37 | color: @actionsheet-action-color; 38 | height: @actionsheet-action-height; 39 | line-height: @actionsheet-action-height; 40 | background-color: @actionsheet-action-bg; 41 | } 42 | } 43 | 44 | 45 | -------------------------------------------------------------------------------- /example/routers/step.vue: -------------------------------------------------------------------------------- 1 | 38 | -------------------------------------------------------------------------------- /src/components/dialog/src/notify/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | const NotifyConstructor = Vue.extend(require('./notify.vue')); 4 | 5 | const instance = new NotifyConstructor({ 6 | el: document.createElement('div') 7 | }); 8 | 9 | let timer = null; 10 | let lock = false; 11 | 12 | NotifyConstructor.prototype.closeNotify = function () { 13 | instance.classes = 'yd-notify-out'; 14 | 15 | setTimeout(() => { 16 | const el = instance.$el; 17 | el.parentNode && el.parentNode.removeChild(el); 18 | lock = false; 19 | }, 150); 20 | 21 | typeof this.callback === 'function' && this.callback(); 22 | }; 23 | 24 | const Notify = (options = {}) => { 25 | instance.classes = ''; 26 | instance.mes = options.mes; 27 | instance.timeout = ~~options.timeout || 5000; 28 | instance.callback = options.callback; 29 | 30 | if (lock)return; 31 | lock = true; 32 | 33 | document.body.appendChild(instance.$el); 34 | 35 | instance.$el.addEventListener('click', () => { 36 | clearTimeout(timer); 37 | instance.closeNotify(); 38 | }); 39 | 40 | timer = setTimeout(() => { 41 | clearTimeout(timer); 42 | instance.closeNotify(); 43 | }, instance.timeout); 44 | }; 45 | 46 | export default Notify; 47 | -------------------------------------------------------------------------------- /src/components/dialog/src/confirm/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import {pageScroll} from '../../../../utils/assist'; 3 | 4 | const ConfirmConstructor = Vue.extend(require('./confirm.vue')); 5 | 6 | const instance = new ConfirmConstructor({ 7 | el: document.createElement('div') 8 | }); 9 | 10 | const hashChange = function () { 11 | pageScroll.unlock(); 12 | 13 | const el = instance.$el; 14 | el.parentNode && el.parentNode.removeChild(el); 15 | }; 16 | 17 | ConfirmConstructor.prototype.closeConfirm = function (stay, callback) { 18 | let stopClose = true; 19 | 20 | if(typeof callback === 'function') { 21 | stopClose = callback(); 22 | if(stopClose === undefined) stopClose = true; 23 | } 24 | 25 | if(!stopClose || stay) return; 26 | 27 | pageScroll.unlock(); 28 | 29 | const el = instance.$el; 30 | el.parentNode && el.parentNode.removeChild(el); 31 | 32 | window.removeEventListener("hashchange", hashChange); 33 | }; 34 | 35 | const Confirm = (options = {}) => { 36 | instance.mes = options.mes || ''; 37 | instance.title = options.title || '提示'; 38 | instance.opts = options.opts; 39 | 40 | window.addEventListener("hashchange", hashChange); 41 | 42 | document.body.appendChild(instance.$el); 43 | 44 | pageScroll.lock(); 45 | }; 46 | 47 | export default Confirm; 48 | -------------------------------------------------------------------------------- /example/routers/timeline.vue: -------------------------------------------------------------------------------- 1 | 31 | -------------------------------------------------------------------------------- /src/components/radio/src/radio.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 42 | -------------------------------------------------------------------------------- /src/ydui.flexible.js: -------------------------------------------------------------------------------- 1 | /** 2 | * YDUI 可伸缩布局方案 3 | * rem计算方式：设计图尺寸px / 100 = 实际rem 例: 100px = 1rem 4 | */ 5 | !function (window) { 6 | 7 | /* 设计图文档宽度 */ 8 | var docWidth = 750; 9 | 10 | var doc = window.document, 11 | docEl = doc.documentElement, 12 | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; 13 | 14 | var recalc = (function refreshRem () { 15 | var clientWidth = docEl.getBoundingClientRect().width; 16 | 17 | /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */ 18 | docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; 19 | 20 | return refreshRem; 21 | })(); 22 | 23 | /* 添加倍屏标识，安卓倍屏为1 */ 24 | docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); 25 | 26 | if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { 27 | /* 添加IOS标识 */ 28 | doc.documentElement.classList.add('ios'); 29 | /* IOS8以上给html添加hairline样式，以便特殊处理 */ 30 | if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) 31 | doc.documentElement.classList.add('hairline'); 32 | } 33 | 34 | if (!doc.addEventListener) return; 35 | window.addEventListener(resizeEvt, recalc, false); 36 | doc.addEventListener('DOMContentLoaded', recalc, false); 37 | 38 | }(window); 39 | -------------------------------------------------------------------------------- /example/routers/icons.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 32 | -------------------------------------------------------------------------------- /src/styles/components/badge.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-badge { 6 | color: @badge-default-color; 7 | font-size: 12px; 8 | position: relative; 9 | display: inline-block; 10 | border-radius: 1000px; 11 | line-height: 1; 12 | padding: 3px 6px; 13 | white-space: nowrap; 14 | background-color: @badge-default-bg; 15 | transform-origin: center center; 16 | } 17 | 18 | &-badge-radius { 19 | border-radius: 2px; 20 | &:after { 21 | border-radius: 2px; 22 | } 23 | } 24 | 25 | &-badge-primary { 26 | background-color: @badge-primary-bg; 27 | color: #FFF; 28 | } 29 | 30 | &-badge-danger { 31 | background-color: @badge-danger-bg; 32 | color: #FFF; 33 | } 34 | 35 | &-badge-warning { 36 | background-color: @badge-warning-bg; 37 | color: #FFF; 38 | } 39 | 40 | &-badge-hollow { 41 | background-color: @badge-hollow-bg; 42 | color: @badge-hollow-color; 43 | &:after { 44 | content: ''; 45 | width: 200%; 46 | height: 200%; 47 | border: 1px solid @badge-hollow-color; 48 | position: absolute; 49 | top: 0; 50 | left: 0; 51 | border-radius: 1rem; 52 | transform-origin: 0 0; 53 | transform: scale(.5); 54 | } 55 | } 56 | 57 | &-badge-radius:after { 58 | border-radius: 2px; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /example/routers/scrolltab.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 36 | -------------------------------------------------------------------------------- /src/components/step/src/step-item.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 43 | -------------------------------------------------------------------------------- /example/routers/preview.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 48 | -------------------------------------------------------------------------------- /src/styles/components/radio.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-radio { 6 | display: inline-block; 7 | padding-right: 10px; 8 | 9 | &-icon { 10 | border: 1px solid #CCC; 11 | border-radius: 50%; 12 | display: inline-block; 13 | position: relative; 14 | z-index: 10; 15 | vertical-align: bottom; 16 | pointer-events: none; 17 | > i { 18 | content: ''; 19 | position: absolute; 20 | left: 50%; 21 | top: 50%; 22 | border-radius: 50%; 23 | background-color: currentColor; 24 | opacity: 0; 25 | transform: translate(-50%, -50%) scale(.1); 26 | } 27 | } 28 | 29 | &-text { 30 | margin-left: 1px; 31 | font-size: 15px; 32 | color: #666; 33 | pointer-events: none; 34 | } 35 | 36 | > input[type="radio"] { 37 | position: absolute; 38 | left: -9999em; 39 | &:checked + .@{css-prefix}-radio-icon { 40 | border-color: currentColor; 41 | > i { 42 | opacity: 1; 43 | transform: translate(-50%, -50%) scale(1); 44 | transition: all .2s ease-in-out; 45 | } 46 | } 47 | &:disabled ~ .@{css-prefix}-radio-text { 48 | color: #CCC; 49 | } 50 | &:disabled + .@{css-prefix}-radio-icon { 51 | border-color: #CCC; 52 | background-color: #F3F3F3; 53 | > i { 54 | background-color: #CCC; 55 | } 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/components/icons/src/icons.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 52 | 53 | 56 | -------------------------------------------------------------------------------- /example/routers/keyboard.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 45 | -------------------------------------------------------------------------------- /src/styles/components/accordion.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-accordion { 6 | background-color: #fff; 7 | } 8 | 9 | &-accordion-head { 10 | display: flex; 11 | align-items: center; 12 | position: relative; 13 | user-select: none; 14 | padding: 0 .24rem; 15 | overflow: hidden; 16 | &:after { 17 | .bottom-line(@line-color); 18 | } 19 | &-content { 20 | flex: 1; 21 | display: flex; 22 | align-items: center; 23 | } 24 | &-arrow { 25 | overflow: hidden; 26 | height: 100%; 27 | min-height: 1rem; 28 | display: flex; 29 | align-items: center; 30 | &:after { 31 | content: ''; 32 | width: 0; 33 | height: 0; 34 | border-left: 5px solid transparent; 35 | border-right: 5px solid transparent; 36 | border-bottom: 7px solid #A0A0A0; 37 | display: block; 38 | transition: transform .1s linear; 39 | transform: rotate(-180deg); 40 | } 41 | &.@{css-prefix}-accordion-rotated:after { 42 | transform: rotate(0deg); 43 | } 44 | } 45 | } 46 | 47 | &-accordion-title { 48 | min-height: 1rem; 49 | display: flex; 50 | align-items: center; 51 | font-size: .28rem; 52 | color: #444; 53 | &-full { 54 | flex: 1; 55 | } 56 | } 57 | 58 | &-accordion-content { 59 | position: relative; 60 | overflow: hidden; 61 | transition: height .1s linear; 62 | &:after { 63 | .bottom-line(@line-color); 64 | } 65 | } 66 | } 67 | 68 | -------------------------------------------------------------------------------- /src/styles/components/popup.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-popup { 6 | position: fixed; 7 | background-color: #FFF; 8 | z-index: @base-zindex * 1500 + 1; 9 | transition: transform .2s; 10 | pointer-events: none; 11 | display: flex; 12 | flex-direction: column; 13 | 14 | &-content { 15 | flex: 1; 16 | position: relative; 17 | overflow-y: auto; 18 | -webkit-overflow-scrolling: touch; 19 | } 20 | 21 | &-left { 22 | transform: translate(-100%, 0); 23 | left: 0; 24 | top: 0; 25 | height: 100%; 26 | } 27 | 28 | &-right { 29 | transform: translate(100%, 0); 30 | right: 0; 31 | top: 0; 32 | height: 100%; 33 | } 34 | 35 | &-bottom { 36 | transform: translate(0, 100%); 37 | right: 0; 38 | bottom: 0; 39 | } 40 | 41 | &-show { 42 | pointer-events: auto; 43 | transform: translate(0, 0); 44 | } 45 | 46 | &-center { 47 | z-index: @base-zindex * 1500 + 2; 48 | position: fixed; 49 | top: 50%; 50 | left: 50%; 51 | opacity: 0; 52 | transform: translate(-50%, -50%) scale(.95); 53 | transform-origin: 50% 50%; 54 | transition: transform .1s; 55 | pointer-events: none; 56 | * { 57 | pointer-events: none; 58 | } 59 | 60 | &.@{css-prefix}-popup-show { 61 | opacity: 1; 62 | transform: translate(-50%, -50%) scale(1); 63 | pointer-events: auto; 64 | * { 65 | pointer-events: auto; 66 | } 67 | } 68 | 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/components/dialog/src/confirm/confirm.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 41 | -------------------------------------------------------------------------------- /src/components/list/src/list-item.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 52 | -------------------------------------------------------------------------------- /src/styles/components/checkbox.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-checkbox { 6 | display: inline-block; 7 | padding-right: 10px; 8 | > input[type="checkbox"] { 9 | position: absolute; 10 | left: -9999em; 11 | &:checked + .@{css-prefix}-checkbox-icon { 12 | background-color: currentColor; 13 | border-color: currentColor; 14 | > i { 15 | transform: translate(-50%, -50%) rotate(45deg) scale(1); 16 | transition: all .2s ease-in-out; 17 | } 18 | } 19 | &:disabled ~ .@{css-prefix}-checkbox-text { 20 | color: #CCC; 21 | } 22 | &:disabled + .@{css-prefix}-checkbox-icon { 23 | border-color: #CCC; 24 | background-color: #F3F3F3; 25 | > i { 26 | border-color: #CCC; 27 | } 28 | } 29 | } 30 | } 31 | 32 | &-checkbox-icon { 33 | border: 1px solid #CCC; 34 | border-radius: 2px; 35 | display: inline-block; 36 | position: relative; 37 | z-index: 10; 38 | vertical-align: bottom; 39 | pointer-events: none; 40 | > i { 41 | content: ''; 42 | position: absolute; 43 | top: 45%; 44 | left: 50%; 45 | border: 2px solid #FFF; 46 | border-top: 0; 47 | border-left: 0; 48 | transform: translate(-50%, -50%) rotate(45deg) scale(0); 49 | } 50 | } 51 | 52 | &-checkbox-text { 53 | margin-left: 1px; 54 | font-size: 15px; 55 | color: #666; 56 | pointer-events: none; 57 | } 58 | 59 | &-checkbox-circle { 60 | .@{css-prefix}-checkbox-icon { 61 | border-radius: 50%; 62 | } 63 | } 64 | } 65 | 66 | -------------------------------------------------------------------------------- /example/routers/list.vue: -------------------------------------------------------------------------------- 1 | 39 | -------------------------------------------------------------------------------- /example/routers/scrollnav.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 41 | 42 | 53 | -------------------------------------------------------------------------------- /src/styles/components/input.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-input { 6 | display: flex; 7 | width: 100%; 8 | height: 100%; 9 | align-items: center; 10 | 11 | > input { 12 | display: block; 13 | width: 100%; 14 | height: 100%; 15 | border: none; 16 | font-size: inherit; 17 | &::-webkit-search-cancel-button { 18 | -webkit-appearance: none; 19 | } 20 | } 21 | 22 | &-clear, 23 | &-error, 24 | &-warn, 25 | &-password, 26 | &-success { 27 | display: flex; 28 | align-items: center; 29 | &:after { 30 | font-family: @iconfont-inlay; 31 | } 32 | } 33 | 34 | &-clear { 35 | height: 100%; 36 | padding-right: .15rem; 37 | padding-left: .2rem; 38 | } 39 | 40 | &-clear { 41 | &:after { 42 | content: '\E60C'; 43 | color: #B2B2B2; 44 | font-size: .3rem; 45 | } 46 | } 47 | &-error { 48 | &:after { 49 | content: '\E614'; 50 | color: #F43530; 51 | font-size: .4rem; 52 | } 53 | } 54 | 55 | &-warn { 56 | &:after { 57 | content: '\E614'; 58 | color: #10AEFF; 59 | font-size: .4rem; 60 | } 61 | } 62 | 63 | &-success { 64 | &:after { 65 | content: '\E601'; 66 | color: #09BB07; 67 | font-size: .4rem; 68 | } 69 | } 70 | 71 | &-password { 72 | &:after { 73 | content: '\E77E'; 74 | color: #B2B2B2; 75 | font-size: .45rem; 76 | } 77 | &-open:after { 78 | content: '\E77D'; 79 | color: #434343; 80 | } 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/styles/components/tabbar.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-tabbar { 6 | width: 100%; 7 | position: relative; 8 | display: flex; 9 | align-items: center; 10 | &:after { 11 | .top-line(currentColor); 12 | } 13 | 14 | &-fixed { 15 | position: fixed; 16 | bottom: 0; 17 | left: 0; 18 | z-index: @base-zindex * 100; 19 | } 20 | 21 | &-item { 22 | flex: 1; 23 | height: 100%; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: center; 27 | align-items: center; 28 | } 29 | 30 | &-active { 31 | color: inherit; 32 | .@{css-prefix}-tabbar-icon { 33 | color: inherit; 34 | } 35 | } 36 | 37 | &-badge { 38 | position: absolute; 39 | top: -.1rem; 40 | left: 100%; 41 | z-index: 999; 42 | margin-left: -.15rem; 43 | } 44 | 45 | &-dot { 46 | display: block; 47 | width: 8px; 48 | height: 8px; 49 | background-color: #EF4F4F; 50 | border-radius: 50%; 51 | position: absolute; 52 | border: 1px solid #FFF; 53 | top: 0; 54 | left: 100%; 55 | z-index: 999; 56 | margin-left: -4px; 57 | } 58 | 59 | &-icon { 60 | display: flex; 61 | align-items: center; 62 | position: relative; 63 | img { 64 | height: inherit; 65 | } 66 | } 67 | 68 | &-txt { 69 | display: inline-block; 70 | font-size: inherit; 71 | } 72 | 73 | &-other { 74 | display: flex; 75 | height: 100%; 76 | align-items: center; 77 | img { 78 | display: block; 79 | } 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /example/routers/button.vue: -------------------------------------------------------------------------------- 1 | 35 | -------------------------------------------------------------------------------- /src/components/checkbox/src/checkbox-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 61 | -------------------------------------------------------------------------------- /src/styles/components/switch.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-switch { 5 | position: relative; 6 | z-index: 10; 7 | display: block; 8 | width: 48px; 9 | height: 27px; 10 | left: 0; 11 | border: 1px solid #DFDFDF; 12 | border-radius: 16px; 13 | -webkit-appearance: none; 14 | 15 | &:before, &:after { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | height: 25px; 21 | border-radius: 15px; 22 | transition: transform .3s; 23 | } 24 | 25 | &:before { 26 | width: 46px; 27 | background-color: #FDFDFD; 28 | } 29 | 30 | &:after { 31 | width: 25px; 32 | background-color: #FFF; 33 | box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 34 | } 35 | 36 | &:checked { 37 | border-color: currentColor; 38 | background-color: currentColor; 39 | &:before { 40 | transform: scale(0); 41 | } 42 | &:after { 43 | transform: translateX(21px); 44 | } 45 | } 46 | 47 | &-small { 48 | width: 42px; 49 | height: 22px; 50 | &:before, &:after { 51 | height: 20px; 52 | } 53 | &:before { 54 | width: 40px; 55 | } 56 | &:after { 57 | width: 20px; 58 | } 59 | &:checked:after { 60 | transform: translateX(20px); 61 | } 62 | } 63 | 64 | &-large { 65 | width: 52px; 66 | height: 32px; 67 | &:before, &:after { 68 | height: 30px; 69 | } 70 | &:before { 71 | width: 50px; 72 | } 73 | &:after { 74 | width: 30px; 75 | } 76 | &:checked:after { 77 | transform: translateX(20px); 78 | } 79 | } 80 | 81 | &[disabled] { 82 | opacity: 0.5; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /example/routers/cityselect.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 50 | -------------------------------------------------------------------------------- /src/styles/components/slider.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | @keyframes yd-kf-opacity-in { 5 | 0% { 6 | opacity: 0; 7 | } 8 | 100% { 9 | opacity: 1; 10 | } 11 | } 12 | 13 | .@{css-prefix} { 14 | &-slider { 15 | width: 100%; 16 | overflow: hidden; 17 | position: relative; 18 | 19 | &-wrapper { 20 | display: flex; 21 | width: 100%; 22 | height: 100%; 23 | transform: translate3d(0px, 0px, 0px); 24 | position: relative; 25 | z-index: 1; 26 | align-items: center; 27 | transition-property: transform; 28 | &-vertical { 29 | flex-direction: column; 30 | } 31 | } 32 | 33 | &-item { 34 | width: 100%; 35 | height: 100%; 36 | flex-shrink: 0; 37 | a { 38 | display: block; 39 | } 40 | img { 41 | width: 100%; 42 | display: block; 43 | } 44 | } 45 | 46 | &-pagination { 47 | position: absolute; 48 | width: 100%; 49 | z-index: 2; 50 | left: 0; 51 | bottom: .1rem; 52 | pointer-events: none; 53 | display: flex; 54 | align-items: flex-end; 55 | justify-content: center; 56 | opacity: 0; 57 | animation: yd-kf-opacity-in .3s linear .4s forwards; 58 | 59 | &-vertical { 60 | width: 0; 61 | height: 100%; 62 | flex-direction: column; 63 | bottom: 0; 64 | left: auto; 65 | right: .1rem; 66 | justify-content: center; 67 | } 68 | 69 | &-item { 70 | margin: .05rem; 71 | width: 6px; 72 | height: 6px; 73 | display: inline-block; 74 | border-radius: 100%; 75 | 76 | &-active { 77 | width: 14px; 78 | border-radius: 100px; 79 | } 80 | } 81 | } 82 | } 83 | } 84 | 85 | -------------------------------------------------------------------------------- /src/styles/components/spinner.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-spinner { 6 | border-radius: 1px; 7 | display: inline-block; 8 | position: relative; 9 | overflow: hidden; 10 | > span { 11 | float: left; 12 | width: 25%; 13 | height: 100%; 14 | text-align: center; 15 | font-weight: bold; 16 | color: #666; 17 | letter-spacing: 0; 18 | position: relative; 19 | overflow: hidden; 20 | .tap-color(#FAFAFA, .95); 21 | > i:after { 22 | font-family: @iconfont-inlay; 23 | color: #777; 24 | font-size: .16rem; 25 | position: absolute; 26 | top: 50%; 27 | left: 50%; 28 | transform: translate(-45%, -40%); 29 | } 30 | &:last-child > i:after { 31 | content: '\E602'; 32 | } 33 | &:first-child > i:after { 34 | content: '\E60B'; 35 | } 36 | } 37 | > input { 38 | letter-spacing: 0; 39 | float: left; 40 | height: inherit; 41 | text-align: center; 42 | color: #666; 43 | border: none; 44 | font-size: .26rem; 45 | background-color: #FFF; 46 | } 47 | &-square { 48 | &:after { 49 | .top-line(@line-color, 5); 50 | top: 0; 51 | } 52 | &:before { 53 | .bottom-line(@line-color, 5); 54 | } 55 | > span { 56 | &:last-child { 57 | &:after { 58 | .right-line(@line-color, 5); 59 | } 60 | } 61 | &:first-child { 62 | &:before { 63 | .left-line(@line-color, 5); 64 | } 65 | } 66 | } 67 | } 68 | &-circle { 69 | > span { 70 | border-radius: 100px; 71 | display: block; 72 | background-color: #F5F5F5; 73 | } 74 | } 75 | } 76 | } 77 | 78 | -------------------------------------------------------------------------------- /example/routers/search.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 52 | -------------------------------------------------------------------------------- /src/components/grids/src/grids-item.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 52 | 53 | 56 | -------------------------------------------------------------------------------- /src/components/badge/src/badge.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 56 | 57 | 60 | -------------------------------------------------------------------------------- /src/components/checklist/src/checklist-item.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 58 | -------------------------------------------------------------------------------- /example/routers/rollnotice.vue: -------------------------------------------------------------------------------- 1 | 49 | -------------------------------------------------------------------------------- /src/components/radio/src/radio-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 68 | 69 | 72 | -------------------------------------------------------------------------------- /example/routers/lightbox.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 45 | -------------------------------------------------------------------------------- /example/routers/sendcode.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 68 | -------------------------------------------------------------------------------- /example/routers/countdown.vue: -------------------------------------------------------------------------------- 1 | 46 | -------------------------------------------------------------------------------- /example/routers/actionsheet.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 58 | -------------------------------------------------------------------------------- /src/components/tabbar/src/tabbar-item.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 61 | -------------------------------------------------------------------------------- /example/routers/navbar.vue: -------------------------------------------------------------------------------- 1 | 52 | -------------------------------------------------------------------------------- /example/routers/progressbar.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 59 | -------------------------------------------------------------------------------- /src/styles/components/checklist.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-checklist { 6 | background-color: #fff; 7 | position: relative; 8 | z-index: 1; 9 | &:after { 10 | .bottom-line(@line-color); 11 | } 12 | } 13 | 14 | &-checklist-alignright { 15 | .@{css-prefix}-checklist-content { 16 | order: -1; 17 | } 18 | .@{css-prefix}-checklist-item-icon { 19 | margin-left: 0; 20 | } 21 | } 22 | 23 | &-checklist-item { 24 | display: flex; 25 | position: relative; 26 | z-index: 1; 27 | margin-left: 12px; 28 | &:not(:last-child):after { 29 | .bottom-line(@line-color); 30 | } 31 | } 32 | 33 | &-checklist-item-icon { 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | padding: 12px; 38 | margin-left: -12px; 39 | > input[type="checkbox"] { 40 | position: absolute; 41 | left: -9999em; 42 | &:checked + .@{css-prefix}-checklist-icon { 43 | background-color: currentColor; 44 | border-color: currentColor; 45 | > i { 46 | transform: translate(-50%, -50%) rotate(45deg) scale(1); 47 | transition: all .2s ease-in-out; 48 | } 49 | } 50 | &:disabled + .@{css-prefix}-checklist-icon { 51 | border-color: #CCC; 52 | background-color: #F3F3F3; 53 | > i { 54 | border-color: #CCC; 55 | } 56 | } 57 | } 58 | } 59 | 60 | &-checklist-icon { 61 | border: 1px solid #CCC; 62 | border-radius: 100px; 63 | display: block; 64 | position: relative; 65 | z-index: 10; 66 | pointer-events: none; 67 | width: 20px; 68 | height: 20px; 69 | > i { 70 | width: 6px; 71 | height: 12px; 72 | content: ''; 73 | position: absolute; 74 | top: 45%; 75 | left: 50%; 76 | border: 2px solid #FFF; 77 | border-top: 0; 78 | border-left: 0; 79 | transform: translate(-50%, -50%) rotate(45deg) scale(0); 80 | } 81 | } 82 | 83 | &-checklist-content { 84 | flex: 1; 85 | position: relative; 86 | color: #333; 87 | padding-right: 12px; 88 | } 89 | } 90 | 91 | -------------------------------------------------------------------------------- /src/components/switch/src/switch.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 72 | 73 | 76 | -------------------------------------------------------------------------------- /src/components/textarea/src/textarea.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 68 | 69 | 72 | -------------------------------------------------------------------------------- /src/components/mask/src/mask.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 67 | 68 | 71 | -------------------------------------------------------------------------------- /src/styles/components/timeline.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-timeline { 6 | background-color: #fff; 7 | font-size: 13px; 8 | color: #6e6e6e; 9 | overflow: hidden; 10 | position: relative; 11 | z-index: 1; 12 | &:after { 13 | .top-line(@line-color); 14 | } 15 | 16 | &-content { 17 | margin-left: 16px; 18 | border-left: 1px solid #E4E5E9; 19 | } 20 | 21 | &-item, 22 | &-custom-item { 23 | padding: 16px 12px 16px 0; 24 | margin-left: 16px; 25 | position: relative; 26 | &:not(:last-child):after { 27 | .bottom-line(@line-color); 28 | } 29 | 30 | .@{css-prefix}-timeline-icon { 31 | content: ''; 32 | position: absolute; 33 | z-index: 1; 34 | left: -16px; 35 | display: block; 36 | top: 19px; 37 | transform: translate(-50%, 0); 38 | } 39 | 40 | &:first-child { 41 | margin-top: 16px; 42 | padding-top: 0; 43 | color: #000; 44 | > .@{css-prefix}-timeline-icon { 45 | top: 3px; 46 | } 47 | } 48 | 49 | &:last-child:before { 50 | content: ''; 51 | width: 1px; 52 | height: 100%; 53 | background-color: #FFF; 54 | position: absolute; 55 | left: -17px; 56 | top: 19px; 57 | } 58 | } 59 | 60 | &-item { 61 | .@{css-prefix}-timeline-icon { 62 | width: 8px; 63 | height: 8px; 64 | border-radius: 99px; 65 | background-color: #E4E5E9; 66 | } 67 | &:first-child { 68 | > .@{css-prefix}-timeline-icon { 69 | background-color: #f23030; 70 | width: 10px; 71 | height: 10px; 72 | } 73 | &:before { 74 | content: ''; 75 | width: 16px; 76 | height: 16px; 77 | position: absolute; 78 | z-index: 0; 79 | top: 0; 80 | left: -24px; 81 | background-color: #FBBFBF; 82 | border-radius: 99px; 83 | } 84 | } 85 | } 86 | 87 | &-custom-item { 88 | &:first-child > .@{css-prefix}-timeline-icon { 89 | top: 0; 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-ydui", 3 | "description": "A mobile components Library with Vue2.js.", 4 | "version": "1.2.5", 5 | "author": "ydcss.com", 6 | "main": "dist/ydui.rem.js", 7 | "style": "dist/ydui.rem.css", 8 | "keywords": [ 9 | "YDUI Touch", 10 | "ui", 11 | "ydui", 12 | "vue", 13 | "vue.js", 14 | "vue2.js", 15 | "component", 16 | "components", 17 | "framework", 18 | "vue2 ui", 19 | "vue2 components", 20 | "mobile", 21 | "mobile ui" 22 | ], 23 | "files": [ 24 | "dist" 25 | ], 26 | "homepage": "http://vue.ydui.org", 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/ydcss/vue-ydui.git" 30 | }, 31 | "scripts": { 32 | "dev": "webpack-dev-server --content-base example/ --port 4321 --inline --hot --host 0.0.0.0 --config build/webpack.dev.conf.js", 33 | "build:rem:components": "webpack --config build/webpack.dist.components.rem.conf.js", 34 | "build:px:components": "webpack --config build/webpack.dist.components.px.conf.js", 35 | "build:prod": "webpack --config build/webpack.dist.prod.conf.js", 36 | "build": "npm run build:rem:components && npm run build:px:components && npm run build:prod && gulp --gulpfile build/build.prod.js" 37 | }, 38 | "devDependencies": { 39 | "autoprefixer": "^6.6.1", 40 | "axios": "^0.18.0", 41 | "babel-core": "^6.21.0", 42 | "babel-loader": "^6.2.10", 43 | "babel-preset-es2015": "^6.18.0", 44 | "css-loader": "^0.26.1", 45 | "extract-text-webpack-plugin": "^1.0.1", 46 | "file-loader": "^0.10.1", 47 | "gulp": "^3.9.1", 48 | "gulp-clean-css": "^2.3.2", 49 | "gulp-less": "^3.3.0", 50 | "gulp-rename": "^1.2.2", 51 | "gulp-uglify": "^2.0.1", 52 | "json-loader": "^0.5.4", 53 | "less": "^2.7.2", 54 | "less-loader": "^2.2.3", 55 | "postcss": "^5.2.14", 56 | "string-replace-webpack-plugin": "^0.1.3", 57 | "style-loader": "^0.13.1", 58 | "vue": "^2.5.2", 59 | "vue-loader": "^10.0.2", 60 | "vue-router": "^2.1.1", 61 | "vue-template-compiler": "^2.5.2", 62 | "webpack": "^1.14.0", 63 | "webpack-dev-server": "1.16.3", 64 | "webpack-merge": "^2.4.0", 65 | "ydui-district": "^1.0.0", 66 | "ydui-rem2px": "^1.0.1" 67 | }, 68 | "license": "MIT" 69 | } 70 | -------------------------------------------------------------------------------- /src/styles/components/navbar.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-navbar { 6 | height: @navbar-height; 7 | position: relative; 8 | display: flex; 9 | z-index: 5; 10 | &:after { 11 | .bottom-line(currentColor); 12 | } 13 | 14 | &-fixed { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | z-index: @base-zindex * 100; 20 | } 21 | 22 | &-item { 23 | flex: 0 0 (100% - @navbar-center-width) / 2; 24 | padding: 0 @body-padding-vertical / 1.2; 25 | font-size: @navbar-item-fontsize; 26 | white-space: nowrap; 27 | overflow: hidden; 28 | display: flex; 29 | align-items: center; 30 | color: inherit; 31 | &:first-child { 32 | order: 1; 33 | margin-right: -(100% - @navbar-center-width) / 2; 34 | } 35 | &:last-child { 36 | order: 3; 37 | justify-content: flex-end; 38 | > a { 39 | justify-content: flex-end; 40 | } 41 | } 42 | > a { 43 | display: flex; 44 | align-items: center; 45 | height: @navbar-height; 46 | min-width: (100% - @navbar-center-width) / 2; /* for low version android */ 47 | flex: 1; 48 | } 49 | } 50 | 51 | &-center-box { 52 | order: 2; 53 | height: @navbar-height; 54 | width: @navbar-center-width; 55 | margin-left: (100% - @navbar-center-width) / 2; 56 | } 57 | 58 | &-center { 59 | width: 100%; 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | height: inherit; 64 | &-title { 65 | white-space: nowrap; 66 | overflow: hidden; 67 | text-overflow: ellipsis; 68 | } 69 | img { 70 | height: 60%; 71 | } 72 | } 73 | } 74 | 75 | &-back-icon:before, 76 | &-next-icon:before { 77 | display: inline-block; 78 | font-family: @iconfont-inlay; 79 | font-size: @navbar-icon-fontsize; 80 | color: inherit; 81 | vertical-align: middle; 82 | margin-top: -.05rem; 83 | } 84 | 85 | &-back-icon:before { 86 | content: '\e607'; 87 | } 88 | 89 | &-next-icon:before { 90 | content: '\e608'; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/components/actionsheet/src/actionsheet.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 67 | 68 | 71 | -------------------------------------------------------------------------------- /src/styles/components/search.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-search { 6 | display: flex; 7 | flex-direction: column; 8 | 9 | &-fly { 10 | width: 100%; 11 | height: 100%; 12 | position: fixed; 13 | left: 0; 14 | z-index: @base-zindex * 1500; 15 | opacity: 0; 16 | pointer-events: none; 17 | } 18 | 19 | &-show { 20 | opacity: 1; 21 | pointer-events: auto; 22 | } 23 | } 24 | 25 | &-search-input { 26 | background-color: #EFEFF4; 27 | border-left: none; 28 | border-right: none; 29 | padding: 10px 0 10px 10px; 30 | position: relative; 31 | display: flex; 32 | &:after { 33 | .bottom-line(@line-color); 34 | } 35 | &:before { 36 | .top-line(@line-color); 37 | } 38 | > .search-input { 39 | width: 100%; 40 | height: 30px; 41 | background-color: #fff; 42 | border: none; 43 | border-radius: 3px; 44 | display: flex; 45 | align-items: center; 46 | margin-right: 10px; 47 | padding-top: 1px; 48 | overflow: hidden; 49 | 50 | .search-icon { 51 | display: flex; 52 | align-items: center; 53 | padding-left: 8px; 54 | padding-right: 5px; 55 | line-height: 28px; 56 | &:after { 57 | content: '\E626'; 58 | font-family: @iconfont-inlay; 59 | font-size: 15px; 60 | color: #B2B2B2; 61 | } 62 | } 63 | } 64 | > .cancel-text { 65 | display: block; 66 | white-space: nowrap; 67 | padding-left: 10px; 68 | height: 30px; 69 | line-height: 32px; 70 | color: #0BB20C; 71 | font-size: 14px; 72 | padding-right: 10px; 73 | margin-left: -10px; 74 | } 75 | } 76 | 77 | &-search-list { 78 | overflow: auto; 79 | flex: 1; 80 | background-color: #FFF; 81 | -webkit-overflow-scrolling: touch; 82 | 83 | &-item { 84 | position: relative; 85 | height: 45px; 86 | line-height: 45px; 87 | margin-left: 12px; 88 | padding-left: 4px; 89 | overflow: hidden; 90 | white-space: nowrap; 91 | padding-right: 12px; 92 | text-overflow: ellipsis; 93 | &:after { 94 | .bottom-line(@line-color); 95 | } 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | 4 | 5 | 6 |
7 |

8 |
9 | 10 | #### 一只基于Vue2.x的移动端&微信UI。 -YDUI Touch 11 | 12 | Home: http://vue.ydui.org 13 | Docs: http://vue.ydui.org/docs 14 | Blog: http://www.ydcss.com 15 | 16 | #### 请用扫码查看 17 | 18 | 19 | #### 开发 20 | 21 | ```shell 22 | 1. npm install 23 | 24 | 2. npm run dev 25 | 26 | 3. http://127.0.0.1:4321 27 | ``` 28 | 29 | #### 参考、使用的项目 30 | 31 | * [fastclick] ([MIT License]) 32 | * [countup.js] ([MIT License]) 33 | * [iview] ([MIT License]) 34 | * [vux] ([MIT License]) 35 | * [mint-ui] ([MIT License]) 36 | * [progressbar.js] ([MIT License]) 37 | * [animate.css] ([MIT License]) 38 | * [scroller] ([MIT License]) 39 | 40 | #### Developed with Open Source Licensed WebStorm 41 | 42 |
43 | 44 | Copyright (c) 2018, ydcss.com 45 |
46 | -------------------------------------------------------------------------------- /example/routers/accordion.vue: -------------------------------------------------------------------------------- 1 | 56 | -------------------------------------------------------------------------------- /src/components/navbar/src/navbar.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 66 | 67 | 70 | -------------------------------------------------------------------------------- /src/styles/components/scrolltab.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-scrolltab { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | display: flex; 12 | &-nav { 13 | height: 100%; 14 | background-color: #F5F5F5; 15 | overflow-y: auto; 16 | -webkit-overflow-scrolling: touch; 17 | position: relative; 18 | z-index: 1; 19 | &:after { 20 | .right-line(#DFDFDF); 21 | } 22 | } 23 | 24 | 25 | &-item { 26 | padding: 0 .3rem; 27 | height: 1rem; 28 | display: flex; 29 | align-items: center; 30 | position: relative; 31 | z-index: 1; 32 | 33 | &:after { 34 | .bottom-line(#DFDFDF); 35 | } 36 | &:before { 37 | .right-line(#DFDFDF); 38 | } 39 | &:active { 40 | background: none; /* for firefox */ 41 | } 42 | } 43 | 44 | &-active { 45 | background-color: #FFF; 46 | &:before { 47 | .right-line(#FFF); 48 | } 49 | &:active { 50 | background-color: #FFF; 51 | } 52 | } 53 | 54 | &-icon { 55 | margin-right: .2rem; 56 | font-size: .32rem; 57 | display: flex; 58 | align-items: center; 59 | justify-content: center; 60 | > img { 61 | height: .4rem; 62 | display: inline-block; 63 | } 64 | } 65 | 66 | &-title { 67 | font-size: .3rem; 68 | color: #666; 69 | overflow-x: hidden; 70 | text-overflow: ellipsis; 71 | white-space: nowrap; 72 | max-width: 1.6rem; 73 | } 74 | 75 | &-content { 76 | height: 100%; 77 | background-color: #FFF; 78 | overflow-y: auto; 79 | -webkit-overflow-scrolling: touch; 80 | flex: 1; 81 | padding: 0 .24rem .24rem .24rem; 82 | position: relative; 83 | } 84 | 85 | &-content-title { 86 | font-size: .3rem; 87 | font-weight: normal; 88 | color: #555; 89 | display: block; 90 | padding-bottom: .1rem; 91 | padding-top: .32rem; 92 | margin-bottom: .2rem; 93 | position: relative; 94 | z-index: 1; 95 | &:after { 96 | .bottom-line(@line-high-color); 97 | } 98 | } 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /example/routers/badge.vue: -------------------------------------------------------------------------------- 1 | 54 | -------------------------------------------------------------------------------- /src/styles/components/grids.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .m-grids() { 5 | overflow: hidden; 6 | position: relative; 7 | background-color: @grids-bg; 8 | &:before { 9 | .bottom-line(@grids-line-high-color, 1); 10 | } 11 | } 12 | 13 | .@{css-prefix} { 14 | 15 | &-grids-2 { 16 | .m-grids(); 17 | .@{css-prefix}-grids-item { 18 | width: 50%; 19 | &:not(:nth-child(2n)):before { 20 | .right-line(@grids-line-color); 21 | } 22 | } 23 | } 24 | 25 | &-grids-3 { 26 | .m-grids(); 27 | .@{css-prefix}-grids-item { 28 | width: 33.333333%; 29 | &:not(:nth-child(3n)):before { 30 | .right-line(@grids-line-color); 31 | } 32 | } 33 | } 34 | 35 | &-grids-4 { 36 | .m-grids(); 37 | .@{css-prefix}-grids-item { 38 | width: 25%; 39 | &:not(:nth-child(4n)):before { 40 | .right-line(@grids-line-color); 41 | } 42 | } 43 | } 44 | 45 | &-grids-5 { 46 | .m-grids(); 47 | .@{css-prefix}-grids-item { 48 | width: 20%; 49 | &:not(:nth-child(5n)):before { 50 | .right-line(@grids-line-color); 51 | } 52 | } 53 | } 54 | 55 | &-grids-item { 56 | width: 25%; 57 | float: left; 58 | position: relative; 59 | z-index: 0; 60 | padding: @grids-padding-horizontal 0; 61 | font-size: @grids-fontsize; 62 | &-center { 63 | display: flex; 64 | justify-content: center; 65 | align-items: center; 66 | } 67 | &:after { 68 | .bottom-line(@grids-line-color); 69 | } 70 | } 71 | 72 | &-grids-icon { 73 | height: .68rem; 74 | display: flex; 75 | justify-content: center; 76 | align-items: center; 77 | * { 78 | &:after, &:before { 79 | font-size: .54rem; 80 | } 81 | } 82 | img { 83 | height: 70%; 84 | } 85 | } 86 | 87 | &-grids-txt { 88 | .text-overflow(center); 89 | color: @grids-color; 90 | padding: 0 .2rem; 91 | } 92 | 93 | &-gridstitle { 94 | padding: .15rem + .2rem @body-padding-vertical .1rem; 95 | font-size: @cell-title-fontsize; 96 | text-align: left; 97 | color: @cell-title-color; 98 | position: relative; 99 | z-index: 1; 100 | background-color: @body-bg; 101 | &:after { 102 | .bottom-line(@line-color, 3); 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/styles/common/reset.less: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | outline: none; 6 | } 7 | 8 | html, body { 9 | height: 100%; 10 | } 11 | 12 | body { 13 | background-color: @body-bg; 14 | font-size: 12px; 15 | -webkit-font-smoothing: antialiased; 16 | font-family: arial, sans-serif; 17 | } 18 | 19 | body, img, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, iframe { 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | article, aside, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video { 25 | display: block; 26 | margin: 0; 27 | padding: 0; 28 | } 29 | 30 | h1, h2, h3, h4, h5, h6 { 31 | font-size: 100%; 32 | } 33 | 34 | fieldset, img { 35 | border: 0; 36 | } 37 | 38 | address, caption, cite, dfn, em, th, var, i, em { 39 | font-style: normal; 40 | font-weight: normal; 41 | } 42 | 43 | ol, ul { 44 | list-style: none; 45 | } 46 | 47 | a { 48 | text-decoration: none; 49 | color: inherit; 50 | &:hover { 51 | text-decoration: none; 52 | } 53 | } 54 | 55 | a, label, button, input, select { 56 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 57 | } 58 | 59 | input, select, button { 60 | font: 100% tahoma, \5b8b\4f53, arial; 61 | vertical-align: baseline; 62 | border-radius: 0; 63 | background-color: transparent; 64 | } 65 | 66 | select { 67 | -webkit-appearance: none; 68 | -moz-appearance: none; 69 | } 70 | 71 | button::-moz-focus-inner, 72 | input[type="reset"]::-moz-focus-inner, 73 | input[type="button"]::-moz-focus-inner, 74 | input[type="submit"]::-moz-focus-inner, 75 | input[type="file"] > input[type="button"]::-moz-focus-inner { 76 | border: none; 77 | } 78 | 79 | input[type=checkbox], input[type=radio] { 80 | vertical-align: middle; 81 | } 82 | 83 | input[type="number"]::-webkit-outer-spin-button, 84 | input[type="number"]::-webkit-inner-spin-button { 85 | -webkit-appearance: none !important; 86 | -moz-appearance: none !important; 87 | margin: 0; 88 | } 89 | 90 | input:-webkit-autofill { 91 | -webkit-box-shadow: 0 0 0 1000px white inset; 92 | } 93 | 94 | textarea { 95 | outline: none; 96 | border-radius: 0; 97 | -webkit-appearance: none; 98 | -moz-appearance: none; 99 | overflow: auto; 100 | resize: none; 101 | font: 100% tahoma, \5b8b\4f53, arial; 102 | } 103 | -------------------------------------------------------------------------------- /src/styles/components/tab.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-tab { 6 | &-box { 7 | overflow: auto; 8 | -webkit-overflow-scrolling: touch; 9 | } 10 | 11 | &-nav-nomal { 12 | .yd-tab-nav { 13 | display: flex; 14 | .yd-tab-nav-item { 15 | width: 1%; 16 | flex: 1; 17 | } 18 | } 19 | } 20 | 21 | &-nav-scoll { 22 | .yd-tab-nav { 23 | .yd-tab-nav-item { 24 | padding: 0 20px; 25 | display: inline-block; 26 | } 27 | } 28 | } 29 | 30 | &-nav { 31 | position: relative; 32 | z-index: 0; 33 | 34 | &:after { 35 | .bottom-line(currentColor, 3); 36 | } 37 | 38 | &-item { 39 | text-align: center; 40 | height: 100%; 41 | display: block; 42 | position: relative; 43 | 44 | &-label { 45 | color: inherit; 46 | display: inline-block; 47 | position: relative; 48 | } 49 | } 50 | 51 | .@{css-prefix}-tab-active { 52 | color: currentColor; 53 | &:before { 54 | content: ''; 55 | width: 70%; 56 | height: 2px; 57 | position: absolute; 58 | left: 50%; 59 | bottom: 0; 60 | margin-left: -35%; 61 | z-index: 4; 62 | background-color: currentColor; 63 | } 64 | } 65 | } 66 | 67 | &-panel { 68 | position: relative; 69 | overflow: hidden; 70 | 71 | &-item { 72 | width: 100%; 73 | position: absolute; 74 | top: 0; 75 | overflow: hidden; 76 | transform: translateX(-100%); 77 | 78 | &.@{css-prefix}-tab-active { 79 | position: relative; 80 | transition: transform .15s; 81 | transform: translateX(0); 82 | 83 | & ~ .@{css-prefix}-tab-panel-item { 84 | transform: translateX(100%); 85 | } 86 | } 87 | } 88 | } 89 | 90 | &-badge { 91 | position: absolute; 92 | top: 2px; 93 | z-index: 9; 94 | line-height: 0; 95 | } 96 | 97 | &-dot { 98 | position: absolute; 99 | top: -10px; 100 | > i { 101 | display: inline-block; 102 | width: 6px; 103 | height: 6px; 104 | border-radius: 100px; 105 | } 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /example/routers/switch.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 66 | -------------------------------------------------------------------------------- /src/styles/components/lightbox.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-lightbox { 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | z-index: @base-zindex * 1500 + 2; 12 | background-color: rgba(0, 0, 0, 1); 13 | 14 | &-head { 15 | display: flex; 16 | color: #FFF; 17 | height: .9rem; 18 | align-items: center; 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | z-index: @base-zindex * 1500 + 3; 24 | background-color: rgba(0, 0, 0, 0.3); 25 | transform: translate(0, 0); 26 | transition: transform .2s; 27 | justify-content: space-between; 28 | > span { 29 | font-size: .24rem; 30 | padding-left: .24rem; 31 | } 32 | > a { 33 | padding-right: .24rem; 34 | font-size: 13px; 35 | } 36 | } 37 | 38 | &-img { 39 | display: flex; 40 | align-items: center; 41 | width: 100%; 42 | height: 100%; 43 | will-change: opacity; 44 | transform-origin: center center; 45 | transition: cubic-bezier(.4, 0, .22, 1); 46 | } 47 | 48 | &-foot { 49 | transform: translate(0, 0); 50 | transition: transform .2s; 51 | position: absolute; 52 | bottom: 0; 53 | left: 0; 54 | width: 100%; 55 | color: #fff; 56 | z-index: @base-zindex * 1500 + 2; 57 | background-color: rgba(0, 0, 0, 0.3); 58 | padding: .24rem; 59 | } 60 | 61 | &-scroller { 62 | -webkit-overflow-scrolling: touch; 63 | max-height: 2rem; 64 | overflow-y: auto; 65 | line-height: .34rem; 66 | } 67 | 68 | &-up-hide { 69 | transform: translate(0, -100%); 70 | } 71 | 72 | &-down-hide { 73 | transform: translate(0, 100%); 74 | } 75 | 76 | &-loading { 77 | width: 30px; 78 | height: 30px; 79 | position: absolute; 80 | top: 50%; 81 | left: 50%; 82 | z-index: 0; 83 | margin-left: -15px; 84 | margin-top: -15px; 85 | } 86 | 87 | &-tip { 88 | position: fixed; 89 | top: 0; 90 | left: 0; 91 | height: 100%; 92 | width: 100%; 93 | background-color: rgba(0, 0, 0, .85); 94 | z-index: @base-zindex * 1500 + 5; 95 | display: flex; 96 | align-items: center; 97 | justify-content: center; 98 | > img { 99 | width: 2.4rem; 100 | } 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /example/routers/popup.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 60 | -------------------------------------------------------------------------------- /example/routers/rate.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 66 | -------------------------------------------------------------------------------- /src/components/step/src/step.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 75 | 76 | 79 | -------------------------------------------------------------------------------- /src/styles/components/preview.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-preview { 6 | background-color: #fff; 7 | position: relative; 8 | z-index: 2; 9 | &:before { 10 | .top-line(@line-color); 11 | } 12 | &:after { 13 | .bottom-line(@line-color); 14 | } 15 | 16 | &-header { 17 | height: 1rem; 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | margin-left: .24rem; 22 | padding-right: .24rem; 23 | position: relative; 24 | color: #999; 25 | font-size: .28rem; 26 | margin-bottom: .2rem; 27 | &:after { 28 | .bottom-line(@line-color); 29 | } 30 | > * { 31 | white-space: nowrap; 32 | overflow: hidden; 33 | text-overflow: ellipsis; 34 | display: block; 35 | flex: 1; 36 | &:first-child { 37 | margin-right: .2rem; 38 | } 39 | &:last-child { 40 | text-align: right; 41 | color: #333; 42 | font-size: .32rem; 43 | } 44 | } 45 | } 46 | 47 | &-item { 48 | padding: 0 .24rem; 49 | font-size: .27rem; 50 | color: #999; 51 | display: flex; 52 | padding-bottom: .15rem; 53 | > * { 54 | display: block; 55 | &:first-child { 56 | min-width: 1.1rem; 57 | text-align-last: justify; 58 | margin-right: .4rem; 59 | height: 100%; 60 | text-align: right; 61 | } 62 | &:last-child { 63 | word-break: normal; 64 | word-wrap: break-word; 65 | text-align: right; 66 | line-height: .45rem; 67 | flex: 1; 68 | } 69 | } 70 | } 71 | 72 | &-item:last-child { 73 | padding-bottom: .25rem; 74 | } 75 | 76 | &-footer { 77 | position: relative; 78 | display: flex; 79 | height: 1rem; 80 | align-items: center; 81 | font-size: .28rem; 82 | color: #999; 83 | margin-top: .1rem; 84 | > * { 85 | flex: 1; 86 | height: inherit; 87 | display: flex; 88 | align-items: center; 89 | position: relative; 90 | justify-content: center; 91 | &:not(:first-child):after { 92 | content: ''; 93 | position: absolute; 94 | top: 0; 95 | left: 0; 96 | .left-line(@line-color); 97 | } 98 | } 99 | &:before { 100 | .top-line(@line-color); 101 | } 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/components/tab/src/tab-panel.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 92 | -------------------------------------------------------------------------------- /src/components/cell/src/cell-item.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 70 | 71 | 74 | -------------------------------------------------------------------------------- /src/components/accordion/src/accordion-item.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 81 | -------------------------------------------------------------------------------- /src/components/backtop/src/backtop.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 77 | 78 | 81 | -------------------------------------------------------------------------------- /src/components/infinitescroll/src/loading.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /src/styles/common/variables.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Component: Variables 3 | * Description: Define all variables 4 | */ 5 | //======== 【Prefix】 ======== 6 | @css-prefix: yd; 7 | 8 | //======== 【iconfont】 ======== 9 | @iconfont-inlay: 'YDUI-INLAY'; 10 | 11 | //======== 【global】 ======== 12 | @base-zindex: 1; 13 | @body-bg: #F5F5F5; 14 | @body-padding-vertical: .24rem; 15 | @body-padding-bottom: .5rem; 16 | @line-color: #ececec; 17 | @line-high-color: #e4e4e4; 18 | @max-width: 750px; 19 | @min-width: 300px; 20 | 21 | //======== 【button】 ======== 22 | @btn-radius: 2px; 23 | @btn-fontsize: .24rem; 24 | @btn-height: .6rem; 25 | @btn-default-color: #FFF; 26 | @btn-block-radius: 3px; 27 | @btn-block-fontsize: .3rem; 28 | @btn-block-height: .9rem; 29 | @btn-block-margin-top: .5rem; 30 | @btn-primary-bg: #04BE02; 31 | @btn-danger-bg: #EF4F4F; 32 | @btn-warning-bg: #FFB400; 33 | @btn-disabled-bg: #CCC; 34 | @btn-disabled-color: #F0F0F0; 35 | @btn-hollow-bg: #FFF; 36 | @btn-hollow-color: #454545; 37 | @btn-hollow-border-color: #EAEAEA; 38 | 39 | //======== 【cell】 ======== 40 | @cell-title-fontsize: .28rem; 41 | @cell-title-color: #888; 42 | @cell-height: 1rem; 43 | @cell-left-color: #555; 44 | @cell-left-fontsize: .28rem; 45 | @cell-right-color: #525252; 46 | @cell-right-fontsize: .26rem; 47 | @cell-input-color: #555; 48 | @cell-input-fontsize: .28rem; 49 | @cell-icon-fontsize: .38rem; 50 | @cell-select-color: #A9A9A9; 51 | @cell-select-fontsize: @cell-left-fontsize; 52 | @cell-arrow-color: #C9C9C9; 53 | @cell-arrow-fontsize: .28rem; 54 | 55 | //======== 【grids】 ======== 56 | @grids-fontsize: .28rem; 57 | @grids-color: #333; 58 | @grids-bg: #FFF; 59 | @grids-padding-horizontal: .35rem; 60 | @grids-line-color: @line-color; 61 | @grids-line-high-color: @line-high-color; 62 | 63 | //======== 【navbar】 ======== 64 | @navbar-height: .9rem; 65 | @navbar-center-width: 50%; 66 | @navbar-item-fontsize: .26rem; 67 | @navbar-icon-fontsize: .3rem; 68 | @navbar-border-color: @line-high-color; 69 | 70 | //======== 【tabbar】 ======== 71 | @tabbar-bg: rgba(255, 255, 255, .96); 72 | @tabbar-border-color: @line-high-color; 73 | 74 | //======== 【actionsheet】 ======== 75 | @actionsheet-bg: #EFEFF4; 76 | @actionsheet-item-height: 1rem; 77 | @actionsheet-item-bg: #FFF; 78 | @actionsheet-item-fontsize: .28rem; 79 | @actionsheet-item-color: #555; 80 | @actionsheet-item-border-color: @line-color; 81 | @actionsheet-action-height: 1rem; 82 | @actionsheet-action-bg: @actionsheet-item-bg; 83 | @actionsheet-action-fontsize: @actionsheet-item-fontsize; 84 | @actionsheet-action-color: @actionsheet-item-color; 85 | 86 | //======== 【tab】 ======== 87 | @tab-bg: #FFF; 88 | @tab-height: .85rem; 89 | @tab-color: #585858; 90 | 91 | //======== 【badge】 ======== 92 | @badge-default-bg: #D0D0D0; 93 | @badge-default-color: #FFF; 94 | @badge-primary-bg: #04BE02; 95 | @badge-danger-bg: #EF4F4F; 96 | @badge-warning-bg: #FFB400; 97 | @badge-hollow-bg: #FBFBFB; 98 | @badge-hollow-color: #B2B2B2; 99 | -------------------------------------------------------------------------------- /src/components/lightbox/src/lightbox.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 88 | 89 | 92 | -------------------------------------------------------------------------------- /src/styles/components/datetime.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | @datetime-item-height: 38px; 5 | 6 | .@{css-prefix} { 7 | &-datetime { 8 | position: fixed; 9 | bottom: 0; 10 | left: 0; 11 | width: 100%; 12 | z-index: @base-zindex * 1500 + 2; 13 | background-color: #FFF; 14 | transform: translateY(100%); 15 | transition: transform .25s; 16 | touch-action: none; 17 | will-change: transform; 18 | 19 | &-active { 20 | transform: translateY(0); 21 | } 22 | 23 | &-placeholder { 24 | color: #A1A1A1; 25 | font-size: inherit; 26 | } 27 | } 28 | 29 | &-datetime-input { 30 | width: 100%; 31 | } 32 | 33 | &-datetime-head { 34 | display: flex; 35 | justify-content: space-between; 36 | position: relative; 37 | background-color: #FBFBFB; 38 | &:after { 39 | .bottom-line(@line-color); 40 | } 41 | > a { 42 | height: 43px; 43 | padding: 0 30px; 44 | font-size: 15px; 45 | display: flex; 46 | align-items: center; 47 | color: #555; 48 | } 49 | > a:last-child { 50 | color: #0BB20C; 51 | } 52 | } 53 | 54 | &-datetime-content { 55 | position: relative; 56 | width: 100%; 57 | height: @datetime-item-height * 7; 58 | overflow: hidden; 59 | display: flex; 60 | } 61 | 62 | &-datetime-item { 63 | font-size: 16px; 64 | height: 100%; 65 | position: relative; 66 | flex: 1; 67 | } 68 | 69 | &-datetime-item-content { 70 | > span { 71 | width: 100%; 72 | display: block; 73 | height: @datetime-item-height; 74 | line-height: @datetime-item-height; 75 | text-align: center; 76 | } 77 | } 78 | 79 | &-datetime-item-box { 80 | height: 100%; 81 | } 82 | 83 | &-datetime-shade, 84 | &-datetime-indicator { 85 | pointer-events: none; 86 | position: absolute; 87 | left: 0; 88 | top: 0; 89 | height: 100%; 90 | width: 100%; 91 | } 92 | 93 | &-datetime-shade { 94 | z-index: 3; 95 | transform: translateZ(0px); 96 | background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); 97 | background-position: top, bottom; 98 | background-size: 100% @datetime-item-height * 3; 99 | background-repeat: no-repeat; 100 | } 101 | 102 | &-datetime-indicator { 103 | z-index: 4; 104 | display: flex; 105 | justify-content: center; 106 | flex-direction: column; 107 | > span { 108 | display: block; 109 | width: 100%; 110 | height: @datetime-item-height; 111 | position: relative; 112 | &:after { 113 | .top-line(@line-color); 114 | } 115 | &:before { 116 | .bottom-line(@line-color); 117 | } 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/components/rate/src/rate.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 92 | 93 | 96 | -------------------------------------------------------------------------------- /dist/lib.px/countdown/index.js: -------------------------------------------------------------------------------- 1 | /*! vue-ydui v1.2.5 by YDCSS (c) 2018 Licensed MIT */ 2 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ydui=e():t.ydui=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="/dist/",e(0)}({0:function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.CountDown=void 0;var o=n(83),r=i(o);e.CountDown=r.default},1:function(t,e){t.exports=function(t,e,n,i){var o,r=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(o=t,r=t.default);var a="function"==typeof r?r.options:r;if(e&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns),n&&(a._scopeId=n),i){var u=a.computed||(a.computed={});Object.keys(i).forEach(function(t){var e=i[t];u[t]=function(){return e}})}return{esModule:o,exports:r,options:a}}},83:function(t,e,n){var i=n(1)(n(264),n(183),null,null);t.exports=i.exports},183:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",[n("span",{domProps:{innerHTML:t._s(t.str)}}),t._v(" "),t.showTpl?n("span",{ref:"tpl"},[t._t("default")],2):t._e()])},staticRenderFns:[]}},264:function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"yd-countdown",data:function(){return{str:"",timer:null,tempFormat:"",showTpl:!0}},props:{time:{type:[String,Number,Date]},format:{type:String,default:"{%d}天{%h}时{%m}分{%s}秒"},timetype:{validator:function(t){return["datetime","second","timestamp"].indexOf(t)>-1},default:"datetime"},callback:{type:Function},doneText:{type:String,default:"已结束"}},watch:{time:function(t){clearInterval(this.timer),t&&this.run()}},methods:{run:function(){this.time&&("second"===this.timetype?this.lastTime=Math.floor(new Date/1e3)+~~this.time:"timestamp"===this.timetype?this.lastTime=Math.floor(new Date(this.time).getTime()):this.lastTime=Math.floor(new Date(this.time).getTime()/1e3),this.time instanceof Date&&(this.lastTime=Math.floor(this.time.getTime()/1e3)),this.doRun(),this.timer=setInterval(this.doRun,1e3))},doRun:function(){var t=this.lastTime-Math.floor((new Date).getTime()/1e3);t>0?this.str=this.timestampTotime(t):(this.callback&&this.callback(),this.str=this.doneText,clearInterval(this.timer))},timestampTotime:function(t){var e=this.tempFormat,n={};n.s=t%60,t=Math.floor(t/60),n.m=t%60,t=Math.floor(t/60),n.h=t%24,n.d=Math.floor(t/24);var i=function(t){return t<=0?"00":t<10?"0"+t:t},o=["d","h","m","s"];return o.forEach(function(t){var o=i(n[t]).toString().split("");e=e.replace("{%"+t+"}",i(n[t])),e=e.replace("{%"+t+"0}",0!==~~o[o.length-3]?o[o.length-3]:""),e=e.replace("{%"+t+"1}",~~o[o.length-2]),e=e.replace("{%"+t+"2}",~~o[o.length-1])}),e}},mounted:function(){var t=this;this.$nextTick(function(){t.tempFormat=t.$slots.default?t.$refs.tpl.innerHTML:t.format,t.showTpl=!1,t.run()})},beforeDestroy:function(){clearInterval(this.timer)}}}})}); -------------------------------------------------------------------------------- /dist/lib.rem/countdown/index.js: -------------------------------------------------------------------------------- 1 | /*! vue-ydui v1.2.5 by YDCSS (c) 2018 Licensed MIT */ 2 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ydui=e():t.ydui=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="/dist/",e(0)}({0:function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.CountDown=void 0;var o=n(83),r=i(o);e.CountDown=r.default},1:function(t,e){t.exports=function(t,e,n,i){var o,r=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(o=t,r=t.default);var a="function"==typeof r?r.options:r;if(e&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns),n&&(a._scopeId=n),i){var u=a.computed||(a.computed={});Object.keys(i).forEach(function(t){var e=i[t];u[t]=function(){return e}})}return{esModule:o,exports:r,options:a}}},83:function(t,e,n){var i=n(1)(n(264),n(183),null,null);t.exports=i.exports},183:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",[n("span",{domProps:{innerHTML:t._s(t.str)}}),t._v(" "),t.showTpl?n("span",{ref:"tpl"},[t._t("default")],2):t._e()])},staticRenderFns:[]}},264:function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"yd-countdown",data:function(){return{str:"",timer:null,tempFormat:"",showTpl:!0}},props:{time:{type:[String,Number,Date]},format:{type:String,default:"{%d}天{%h}时{%m}分{%s}秒"},timetype:{validator:function(t){return["datetime","second","timestamp"].indexOf(t)>-1},default:"datetime"},callback:{type:Function},doneText:{type:String,default:"已结束"}},watch:{time:function(t){clearInterval(this.timer),t&&this.run()}},methods:{run:function(){this.time&&("second"===this.timetype?this.lastTime=Math.floor(new Date/1e3)+~~this.time:"timestamp"===this.timetype?this.lastTime=Math.floor(new Date(this.time).getTime()):this.lastTime=Math.floor(new Date(this.time).getTime()/1e3),this.time instanceof Date&&(this.lastTime=Math.floor(this.time.getTime()/1e3)),this.doRun(),this.timer=setInterval(this.doRun,1e3))},doRun:function(){var t=this.lastTime-Math.floor((new Date).getTime()/1e3);t>0?this.str=this.timestampTotime(t):(this.callback&&this.callback(),this.str=this.doneText,clearInterval(this.timer))},timestampTotime:function(t){var e=this.tempFormat,n={};n.s=t%60,t=Math.floor(t/60),n.m=t%60,t=Math.floor(t/60),n.h=t%24,n.d=Math.floor(t/24);var i=function(t){return t<=0?"00":t<10?"0"+t:t},o=["d","h","m","s"];return o.forEach(function(t){var o=i(n[t]).toString().split("");e=e.replace("{%"+t+"}",i(n[t])),e=e.replace("{%"+t+"0}",0!==~~o[o.length-3]?o[o.length-3]:""),e=e.replace("{%"+t+"1}",~~o[o.length-2]),e=e.replace("{%"+t+"2}",~~o[o.length-1])}),e}},mounted:function(){var t=this;this.$nextTick(function(){t.tempFormat=t.$slots.default?t.$refs.tpl.innerHTML:t.format,t.showTpl=!1,t.run()})},beforeDestroy:function(){clearInterval(this.timer)}}}})}); -------------------------------------------------------------------------------- /example/routers/grids.vue: -------------------------------------------------------------------------------- 1 | 68 | -------------------------------------------------------------------------------- /example/routers/radio.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 81 | -------------------------------------------------------------------------------- /src/components/checklist/src/checklist.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 87 | 88 | 91 | --------------------------------------------------------------------------------