├── src
    ├── utils
    │   ├── index.ts
    │   └── events.ts
    ├── styles
    │   ├── functions.scss
    │   ├── _vars.scss
    │   ├── common.scss
    │   └── mixin.scss
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── cc-icon
    │   │   ├── uni.ttf
    │   │   ├── cc-icon.vue
    │   │   └── icons.ts
    │   ├── cc-gap
    │   │   └── cc-gap.vue
    │   ├── cc-link
    │   │   └── cc-link.vue
    │   ├── cc-layout
    │   │   ├── cc-row.vue
    │   │   └── cc-col.vue
    │   ├── cc-sticky
    │   │   └── cc-sticky.vue
    │   ├── cc-form
    │   │   ├── cc-form.vue
    │   │   └── types.ts
    │   ├── cc-coupon-cell
    │   │   └── cc-coupon-cell.vue
    │   ├── cc-load-more
    │   │   └── cc-load-more.vue
    │   ├── cc-avatar
    │   │   └── cc-avatar.vue
    │   ├── cc-circle-progress
    │   │   └── cc-circle-progress.vue
    │   ├── cc-divider
    │   │   └── cc-divider.vue
    │   ├── cc-mask
    │   │   └── cc-mask.vue
    │   ├── cc-countup
    │   │   └── cc-countup.vue
    │   ├── cc-badge
    │   │   └── cc-badge.vue
    │   ├── cc-skeleton
    │   │   └── cc-skeleton.vue
    │   ├── cc-contact-card
    │   │   └── cc-contact-card.vue
    │   ├── cc-open-more
    │   │   └── cc-open-more.vue
    │   ├── cc-rate
    │   │   └── cc-rate.vue
    │   ├── cc-notify
    │   │   └── cc-notify.vue
    │   ├── cc-pull-refresh
    │   │   └── cc-pull-refresh.vue
    │   ├── cc-swipe-cell
    │   │   └── cc-swipe-cell.vue
    │   ├── cc-tabs
    │   │   └── cc-tabs.vue
    │   ├── cc-switch
    │   │   └── cc-switch.vue
    │   ├── cc-verify-button
    │   │   └── cc-verify-button.vue
    │   ├── cc-submit-bar
    │   │   └── cc-submit-bar.vue
    │   ├── cc-grid
    │   │   └── cc-grid.vue
    │   ├── cc-area
    │   │   └── cc-area.vue
    │   ├── cc-sidebar
    │   │   └── cc-sidebar.vue
    │   ├── cc-cell
    │   │   └── cc-cell.vue
    │   ├── cc-loading
    │   │   └── cc-loading.vue
    │   ├── cc-contact-list
    │   │   └── cc-contact-list.vue
    │   └── cc-nav-bar
    │   │   └── cc-nav-bar.vue
    ├── App.vue
    ├── main.ts
    ├── shims-vue.d.ts
    ├── views
    │   ├── area
    │   │   └── index.vue
    │   ├── pullRefresh
    │   │   └── index.vue
    │   ├── link
    │   │   └── index.vue
    │   ├── calendar
    │   │   └── index.vue
    │   ├── swipeCell
    │   │   └── index.vue
    │   ├── tabs
    │   │   └── index.vue
    │   ├── demo
    │   │   ├── my.vue
    │   │   ├── cart.vue
    │   │   └── category.vue
    │   ├── sticky
    │   │   └── index.vue
    │   ├── gap
    │   │   └── index.vue
    │   ├── imagePreview
    │   │   └── index.vue
    │   ├── addressList
    │   │   └── index.vue
    │   ├── addressEdit
    │   │   └── index.vue
    │   ├── upload
    │   │   └── index.vue
    │   ├── loadMore
    │   │   └── index.vue
    │   ├── contactCard
    │   │   └── index.vue
    │   ├── swiper
    │   │   └── index.vue
    │   ├── contactList
    │   │   └── index.vue
    │   ├── circleProgress
    │   │   └── index.vue
    │   ├── submitBar
    │   │   └── index.vue
    │   ├── mask
    │   │   └── index.vue
    │   ├── rate
    │   │   └── index.vue
    │   ├── countdown
    │   │   └── index.vue
    │   ├── form
    │   │   └── index.vue
    │   ├── goodsCard
    │   │   └── index.vue
    │   ├── divider
    │   │   └── index.vue
    │   ├── loading
    │   │   └── index.vue
    │   ├── progress
    │   │   └── index.vue
    │   ├── skeleton
    │   │   └── index.vue
    │   ├── coupon
    │   │   └── index.vue
    │   ├── switch
    │   │   └── index.vue
    │   ├── numberKeyboard
    │   │   └── index.vue
    │   ├── verifyButton
    │   │   └── index.vue
    │   ├── noticeBar
    │   │   └── index.vue
    │   ├── avatar
    │   │   └── index.vue
    │   ├── passwordInput
    │   │   └── index.vue
    │   ├── cell
    │   │   └── index.vue
    │   ├── sidebar
    │   │   └── index.vue
    │   ├── navBar
    │   │   └── index.vue
    │   ├── notify
    │   │   └── index.vue
    │   ├── goodsAction
    │   │   └── index.vue
    │   ├── stepper
    │   │   └── index.vue
    │   ├── grid
    │   │   └── index.vue
    │   ├── slider
    │   │   └── index.vue
    │   ├── collapse
    │   │   └── index.vue
    │   ├── checker
    │   │   └── index.vue
    │   ├── search
    │   │   └── index.vue
    │   ├── treeSelect
    │   │   └── index.vue
    │   ├── openMore
    │   │   └── index.vue
    │   ├── layout
    │   │   └── index.vue
    │   ├── steps
    │   │   └── index.vue
    │   ├── tag
    │   │   └── index.vue
    │   ├── dropdown
    │   │   └── index.vue
    │   ├── countup
    │   │   └── index.vue
    │   ├── tabbar
    │   │   └── index.vue
    │   └── popup
    │   │   └── index.vue
    └── hooks
    │   └── index.ts
├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── .gitignore
├── .npmignore
├── vue.config.js
├── tsconfig.json
├── package.json
└── README.md


/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/src/utils/events.ts:
--------------------------------------------------------------------------------
1 | import mitt from 'mitt'
2 | 
3 | export default mitt()


--------------------------------------------------------------------------------
/src/styles/functions.scss:
--------------------------------------------------------------------------------
1 | @function topx($value) {
2 |   @return $value + 'px'
3 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LadyChatterleyLover/cc-ui-vue3/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LadyChatterleyLover/cc-ui-vue3/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/cc-icon/uni.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LadyChatterleyLover/cc-ui-vue3/HEAD/src/components/cc-icon/uni.ttf


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <router-view />
3 | </template>
4 | 
5 | <style lang="scss">
6 |  @import "./styles/common.scss"; 
7 | </style>
8 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import ccUI from './components'
5 | 
6 | createApp(App).use(ccUI).use(router).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/src/views/area/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <cc-area></cc-area>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | 
 9 | </script>
10 | 
11 | <style scoped lang="scss">
12 | 
13 | </style>


--------------------------------------------------------------------------------
/src/views/pullRefresh/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <cc-pull-refresh success-text='刷新成功'>
 4 |       下拉刷新
 5 |     </cc-pull-refresh>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup lang="ts">
10 | 
11 | </script>
12 | 
13 | <style scoped>
14 | 
15 | </style>


--------------------------------------------------------------------------------
/src/views/link/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <cc-link href="https://www.baidu.com">
 4 |       点此链接,跳转到百度
 5 |     </cc-link>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup lang="ts">
10 | 
11 | </script>
12 | 
13 | <style scoped lang="scss">
14 | 
15 | </style>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const isPro = process.env.NODE_ENV !== 'production'
 2 | 
 3 | module.exports = {
 4 |   publicPath: isPro ? './' : '',
 5 |   css: {
 6 |     loaderOptions: {
 7 |       scss: {
 8 |         prependData: `
 9 |         @import "@/styles/_vars.scss";
10 |         @import "@/styles/functions.scss";
11 |         @import "@/styles/mixin.scss";`
12 |       },
13 |     }
14 |   }
15 | }


--------------------------------------------------------------------------------
/src/styles/_vars.scss:
--------------------------------------------------------------------------------
 1 | // 主要颜色
 2 | $primary: #0081ff;
 3 | // 成功颜色
 4 | $success: #39b54a;
 5 | // 错误颜色
 6 | $error: #e54d42;
 7 | // 警告颜色
 8 | $warning: #f37b1d;
 9 | // 信息颜色
10 | $info: #909399;
11 | // 边框颜色
12 | $border: #ebedf0;
13 | // 文字颜色
14 | $text-color: #323233;
15 | // 文字浅色
16 | $text-light-color: #969799;
17 | // 白色
18 | $white: #fff;
19 | // 黑色
20 | $blank: #000;
21 | // 红色
22 | $red: #ee0a24;
23 | 


--------------------------------------------------------------------------------
/src/views/calendar/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <cc-calendar v-model:show='show' @confirm='confirm'></cc-calendar>
 3 |    <cc-button type="primary" size="small" @click='show = true'>打开日历</cc-button>
 4 | </template>
 5 | 
 6 | <script setup lang="ts">
 7 | import {ref} from 'vue'
 8 | 
 9 | let show = ref<boolean>(false)
10 | 
11 | let confirm = (val: any) => {
12 |   console.log(val)
13 | }
14 | </script>
15 | 
16 | <style scoped lang="scss">
17 | 
18 | </style>


--------------------------------------------------------------------------------
/src/views/swipeCell/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <cc-swipe-cell>
 4 |       <cc-cell :border="false" title="单元格" value="内容" />
 5 |       <template #right>
 6 |         <cc-button type="error">删除</cc-button>
 7 |         <cc-button type="success">收藏</cc-button>
 8 |       </template>
 9 |     </cc-swipe-cell>
10 |   </div>
11 | </template>
12 | 
13 | <script setup lang="ts">
14 | 
15 | </script>
16 | 
17 | <style scoped lang="scss">
18 | </style>


--------------------------------------------------------------------------------
/src/styles/common.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | html,
 8 | body,
 9 | #app {
10 |   height: 100%;
11 | }
12 | 
13 | input {
14 |   position: relative;
15 |   display: block;
16 |   height: 100%;
17 |   background: none;
18 |   color: inherit;
19 |   opacity: 1;
20 |   font: inherit;
21 |   line-height: inherit;
22 |   letter-spacing: inherit;
23 |   text-align: inherit;
24 |   text-indent: inherit;
25 |   text-transform: inherit;
26 |   text-shadow: inherit;
27 | }


--------------------------------------------------------------------------------
/src/views/tabs/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <cc-tabs :current='current' :list="list"></cc-tabs>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | import { TabsListItem } from "@/components/cc-tabs/cc-tabs.vue";
 9 | 
10 | let list: TabsListItem[] = [
11 |   {
12 |     title: '明年今日',
13 |   },
14 |   {
15 |     title: '圣诞节'
16 |   },
17 |   {
18 |     title: '无条件'
19 |   },
20 |   {
21 |     title: '沙龙'
22 |   },
23 |   {
24 |     title: '谢谢侬'
25 |   },
26 |   {
27 |     title: '人来人往'
28 |   },
29 |   {
30 |     title: '最佳损友'
31 |   },
32 | ]
33 | let current = 0
34 | </script>
35 | 
36 | <style scoped lang='scss'>
37 | </style>


--------------------------------------------------------------------------------
/src/styles/mixin.scss:
--------------------------------------------------------------------------------
 1 | @mixin f-col {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 | }
 5 | 
 6 | @mixin j-center {
 7 |   display: flex;
 8 |   justify-content: center;
 9 |   align-items: center;
10 | }
11 | 
12 | @mixin a-center {
13 |   display: flex;
14 |   justify-content: center;
15 |   align-items: center;
16 |   flex-direction: column;
17 | }
18 | 
19 | @mixin j-between {
20 |   display: flex;
21 |   justify-content: space-between;
22 | }
23 | 
24 | @mixin j-around {
25 |   display: flex;
26 |   justify-content: space-around;
27 | }
28 | 
29 | @mixin f-wrap {
30 |   display: flex;
31 |   justify-content: center;
32 |   align-items: center;
33 |   flex-wrap: wrap;
34 | }


--------------------------------------------------------------------------------
/src/views/demo/my.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     我的
 4 |     <cc-tabbar :list='list3' router fixed></cc-tabbar>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup lang="ts">
 9 | import { TabbarListItem } from "@/components/cc-tabbar/cc-tabbar.vue"
10 | 
11 | let list3: TabbarListItem[] = [
12 |   {
13 |     text: '首页',
14 |     icon: 'home',
15 |     url: '/tabbar'
16 |   },
17 |   {
18 |     text: '分类',
19 |     icon: 'bars',
20 |     url: '/category'
21 |   },
22 |   {
23 |     text: '购物车',
24 |     icon: 'cart',
25 |     url: '/cart'
26 |   },
27 |   {
28 |     text: '我的',
29 |     icon: 'person',
30 |     url: '/my'
31 |   }
32 | ]
33 | </script>
34 | 
35 | <style scoped>
36 | 
37 | </style>


--------------------------------------------------------------------------------
/src/views/demo/cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     购物车
 4 |     <cc-tabbar :list='list3' router fixed></cc-tabbar>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup lang="ts">
 9 | import { TabbarListItem } from "@/components/cc-tabbar/cc-tabbar.vue"
10 | 
11 | let list3: TabbarListItem[] = [
12 |   {
13 |     text: '首页',
14 |     icon: 'home',
15 |     url: '/tabbar'
16 |   },
17 |   {
18 |     text: '分类',
19 |     icon: 'bars',
20 |     url: '/category'
21 |   },
22 |   {
23 |     text: '购物车',
24 |     icon: 'cart',
25 |     url: '/cart'
26 |   },
27 |   {
28 |     text: '我的',
29 |     icon: 'person',
30 |     url: '/my'
31 |   }
32 | ]
33 | </script>
34 | 
35 | <style scoped>
36 | 
37 | </style>


--------------------------------------------------------------------------------
/src/views/demo/category.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     分类
 4 |     <cc-tabbar :list='list3' router fixed></cc-tabbar>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup lang="ts">
 9 | import { TabbarListItem } from "@/components/cc-tabbar/cc-tabbar.vue"
10 | 
11 | let list3: TabbarListItem[] = [
12 |   {
13 |     text: '首页',
14 |     icon: 'home',
15 |     url: '/tabbar'
16 |   },
17 |   {
18 |     text: '分类',
19 |     icon: 'bars',
20 |     url: '/category'
21 |   },
22 |   {
23 |     text: '购物车',
24 |     icon: 'cart',
25 |     url: '/cart'
26 |   },
27 |   {
28 |     text: '我的',
29 |     icon: 'person',
30 |     url: '/my'
31 |   }
32 | ]
33 | </script>
34 | 
35 | <style scoped>
36 | 
37 | </style>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> 
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/views/sticky/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div>2002年的第一场雪</div>
 4 |     <cc-sticky>
 5 |       <div class="sticky">比以往时候来的更晚一些</div>
 6 |     </cc-sticky>
 7 |     <div style="margin-left: 100px;">
 8 |       <cc-sticky :offset-top="50">
 9 |         <div class="sticky">停靠在8楼的2路汽车</div>
10 |       </cc-sticky>
11 |       <div>带走了最后一片飘落的黄叶</div>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script setup lang="ts">
17 | 
18 | </script>
19 | 
20 | <style scoped lang="scss">
21 | .container {
22 |   height: 200vh;
23 |   margin-top: 75px;
24 | }
25 | 
26 | .sticky {
27 |   width: 100px;
28 |   background-color: #2979ff;
29 |   color: #fff;
30 |   padding: 12px;
31 |   text-align: center;
32 | }
33 | </style>


--------------------------------------------------------------------------------
/src/views/gap/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-gap bg-color="#ccc"></cc-gap>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="demo">
11 |       <div class="demo-title">上下间距</div>
12 |       <div class="demo-item">
13 |         <cc-gap bg-color="#ccc" marginBottom="30" marginTop="30"></cc-gap>
14 |       </div>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script setup lang="ts">
20 | 
21 | </script>
22 | 
23 | <style scoped lang="scss">
24 | .demo {
25 |   &-title {
26 |     padding: 10px;
27 |   }
28 |   &-item {
29 |     margin-bottom: 30px;
30 |     &:last-child {
31 |       margin-bottom: 0;
32 |     }
33 |   }
34 | }
35 | </style>


--------------------------------------------------------------------------------
/src/hooks/index.ts:
--------------------------------------------------------------------------------
 1 | import { ref, onMounted, onUnmounted, Ref } from 'vue'
 2 | 
 3 | export const useClickOutside = (elementRef: Ref<HTMLElement | null>) => {
 4 | 
 5 |   // 设置一个导出值
 6 |   const isClickOutside = ref(false)
 7 | 
 8 |   // 给界面绑定上事件
 9 |   const handler = (e: MouseEvent) => {
10 |     if (elementRef.value) {
11 |       // e.target 有可能是为 null 所以需要断言
12 |       if (elementRef.value.contains(e.target as HTMLElement)) {
13 |         // 判断目标节点是不是当前的节点
14 |         isClickOutside.value = false
15 |       } else {
16 |         isClickOutside.value = true
17 |       }
18 |     }
19 |   }
20 |   onMounted(() => {
21 |     document.addEventListener('click', handler)
22 |   })
23 |   onUnmounted(() => {
24 |     document.removeEventListener('click', handler)
25 |   })
26 |   return {
27 |     isClickOutside
28 |   }
29 | }


--------------------------------------------------------------------------------
/src/views/imagePreview/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <cc-button @click="show = true" type='primary'>打开预览</cc-button>
 4 |     <cc-image-preview v-model:value="show" :list="list" :actions="actions"></cc-image-preview>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup lang="ts">
 9 | import { ref } from "vue"
10 | 
11 | let show = ref<boolean>(false)
12 | let list = [
13 |   {
14 |     image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
15 |   },
16 |   {
17 |     image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
18 |   },
19 |   {
20 |     image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
21 |   }
22 | ]
23 | let actions = [
24 |   {
25 |     name: '选项一'
26 |   },
27 |   {
28 |     name: '选项二'
29 |   },
30 |   {
31 |     name: '选项三'
32 |   }
33 | ]
34 | </script>
35 | 
36 | <style scoped lang="scss">
37 | </style>


--------------------------------------------------------------------------------
/src/components/cc-gap/cc-gap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="cc-gap"
 4 |     :style="{
 5 |       background: bgColor,
 6 |       height: height + 'px',
 7 |       marginTop: marginTop + 'px',
 8 |       marginBottom: marginBottom + 'px'
 9 |     }"
10 |   ></div>
11 | </template>
12 | 
13 | <script setup lang="ts">
14 | import { defineProps } from 'vue'
15 | 
16 | let props = defineProps({
17 |   // 背景颜色
18 |   bgColor: {
19 |     type: String,
20 |     default: 'transparent'
21 |   },
22 |   // 间隔槽高度
23 |   height: {
24 |     type: [String, Number],
25 |     default: 30
26 |   },
27 |   // 与前一个元素的距离
28 |   marginTop: {
29 |     type: [String, Number],
30 |     default: 0
31 |   },
32 |   // 与后一个元素的距离
33 |   marginBottom: {
34 |     type: [String, Number],
35 |     default: 0
36 |   }
37 | })
38 | </script>
39 | 
40 | <style scoped lang="scss">
41 | </style>


--------------------------------------------------------------------------------
/src/views/addressList/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <cc-address-list
 3 |     :value="chosenAddressId"
 4 |     :list="addressList"
 5 |     :disabled-list="disabledList"
 6 |     disabled-text="以下地址超出配送范围"
 7 |     default-tag-text="默认"
 8 |   ></cc-address-list>
 9 | </template>
10 | 
11 | <script setup lang="ts">
12 | 
13 | let chosenAddressId = '1'
14 | let addressList = [
15 |   {
16 |     id: '1',
17 |     name: '张三',
18 |     tel: '13000000000',
19 |     address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
20 |     isDefault: true
21 |   },
22 |   {
23 |     id: '2',
24 |     name: '李四',
25 |     tel: '1310000000',
26 |     address: '浙江省杭州市拱墅区莫干山路 50 号'
27 |   }
28 | ]
29 | let disabledList = [
30 |   {
31 |     id: '3',
32 |     name: '王五',
33 |     tel: '1320000000',
34 |     address: '浙江省杭州市滨江区江南大道 15 号'
35 |   }
36 | ]
37 | </script>
38 | 
39 | <style scoped>
40 | </style>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": true,
 4 |     "target": "esnext",
 5 |     "module": "esnext",
 6 |     "strict": true,
 7 |     "jsx": "preserve",
 8 |     "importHelpers": true,
 9 |     "moduleResolution": "node",
10 |     "experimentalDecorators": true,
11 |     "skipLibCheck": true,
12 |     "esModuleInterop": true,
13 |     "allowSyntheticDefaultImports": true,
14 |     "sourceMap": true,
15 |     "baseUrl": ".",
16 |     "types": [
17 |       "webpack-env"
18 |     ],
19 |     "paths": {
20 |       "@/*": [
21 |         "src/*"
22 |       ]
23 |     },
24 |     "lib": [
25 |       "esnext",
26 |       "dom",
27 |       "dom.iterable",
28 |       "scripthost"
29 |     ]
30 |   },
31 |   "include": [
32 |     "src/**/*.ts",
33 |     "src/**/*.tsx",
34 |     "src/**/*.vue",
35 |     "tests/**/*.ts",
36 |     "tests/**/*.tsx"
37 |   ],
38 |   "exclude": [
39 |     "node_modules"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/src/views/addressEdit/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demo">
 3 |     <div>
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-address-edit></cc-address-edit>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div>
11 |       <div class="demo-title">设置初始值</div>
12 |       <div class="demo-item">
13 |         <cc-address-edit :addressInfo="addressInfo"></cc-address-edit>
14 |       </div>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script setup lang="ts">
20 | let addressInfo = {
21 |   name: 'admin',
22 |   tel: '13588888888',
23 |   province: '北京市',
24 |   city: '北京市',
25 |   county: '东城区',
26 |   addressDetail: '乌托邦',
27 |   areaCode: '',
28 |   postalCode: '100000',
29 |   isDefault: true
30 | }
31 | </script>
32 | 
33 | <style scoped lang="scss">
34 | .demo {
35 |   background: #f7f7f7;
36 |   &-title {
37 |     padding: 10px;
38 |   }
39 |   &-item {
40 |     margin-bottom: 30px;
41 |     &:last-child {
42 |       margin-bottom: 0;
43 |     }
44 |   }
45 | }
46 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cc-ui",
 3 |   "version": "0.1.0",
 4 |   "private": false,
 5 |   "main": "dist/cc-ui.umd.min.js",
 6 |   "author": {
 7 |     "name": "cc-ui"
 8 |   },
 9 |   "scripts": {
10 |     "dev": "vue-cli-service serve",
11 |     "build": "vue-cli-service build",
12 |     "lib": "vue-cli-service build --target lib"
13 |   },
14 |   "dependencies": {
15 |     "@types/countup.js": "^2.0.4",
16 |     "@types/lodash": "^4.14.171",
17 |     "async-validator": "^3.5.2",
18 |     "core-js": "^3.6.5",
19 |     "countup.js": "^2.0.7",
20 |     "dayjs": "^1.10.6",
21 |     "lodash": "^4.17.21",
22 |     "mitt": "^3.0.0",
23 |     "vue": "^3.0.0",
24 |     "vue-class-component": "^8.0.0-0",
25 |     "vue-router": "^4.0.0-0"
26 |   },
27 |   "devDependencies": {
28 |     "@vue/cli-plugin-babel": "~4.5.0",
29 |     "@vue/cli-plugin-router": "~4.5.0",
30 |     "@vue/cli-plugin-typescript": "~4.5.0",
31 |     "@vue/cli-service": "~4.5.0",
32 |     "@vue/compiler-sfc": "^3.0.0",
33 |     "sass": "^1.26.5",
34 |     "sass-loader": "^8.0.2",
35 |     "typescript": "~4.1.5"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/cc-link/cc-link.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     @click="goto"
 4 |     class="cc-link"
 5 |     :style="{ fontSize: fontSize + 'px', color, borderBottom: underLine ? `1px solid ${lineColor}` : 'none' }"
 6 |   >
 7 |     <slot></slot>
 8 |   </div>
 9 | </template>
10 | 
11 | <script setup lang="ts">
12 | import { defineProps } from 'vue'
13 | 
14 | let props = defineProps({
15 |   // 链接地址
16 |   href: {
17 |     type: String,
18 |     required: true
19 |   },
20 |   // 文字颜色
21 |   color: {
22 |     type: String,
23 |     default: '#0081ff'
24 |   },
25 |   // 字体大小
26 |   fontSize: {
27 |     type: [String, Number],
28 |     default: '14'
29 |   },
30 |   // 是否显示下划线
31 |   underLine: {
32 |     type: Boolean,
33 |     default: true
34 |   },
35 |   // 下划线颜色
36 |   lineColor: {
37 |     type: String,
38 |     default: '#0081ff'
39 |   },
40 |   // 小程序平台复制提示
41 |   mpTips: {
42 |     type: String,
43 |     default: '链接已复制, 请在浏览器打开'
44 |   }
45 | })
46 | 
47 | let goto = () => {
48 |   window.open(props.href)
49 | }
50 | </script>
51 | 
52 | <style scoped lang="scss">
53 | .cc-link {
54 |   width: fit-content;
55 | }
56 | </style>


--------------------------------------------------------------------------------
/src/components/cc-icon/cc-icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<span
 3 | 		:style="{ color: color, fontSize: size + 'px' }"
 4 | 		class="uni-icons"
 5 | 		:class="[customIcons, customIcons ? type : '']"
 6 | 		@click="onClick"
 7 | 	>{{ icon }}</span>
 8 | </template>
 9 | 
10 | <script lang='ts' setup>
11 | import { defineProps, defineEmits, computed } from 'vue'
12 | import icons from './icons'
13 | 
14 | let emit = defineEmits(['click'])
15 | let props = defineProps({
16 | 	type: {
17 | 		type: String,
18 | 		default: ''
19 | 	},
20 | 	color: {
21 | 		type: String,
22 | 		default: '#333333'
23 | 	},
24 | 	size: {
25 | 		type: [Number, String],
26 | 		default: 16
27 | 	},
28 | 	customIcons: {
29 | 		type: String,
30 | 		default: ''
31 | 	}
32 | })
33 | let onClick = (e: MouseEvent) => {
34 | 	emit('click', e)
35 | }
36 | let icon = computed(() => (icons as any)[props.type])
37 | </script>
38 | 
39 | <style lang="scss" scoped>
40 | 	@font-face {
41 | 		font-family: uniicons;
42 | 		src: url('./uni.ttf') format('truetype');
43 | 	}
44 | .uni-icons {
45 | 	font-family: uniicons;
46 | 	text-decoration: none;
47 | 	text-align: center;
48 | 	position: relative;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/views/upload/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">
 5 |         基础用法
 6 |       </div>
 7 |       <cc-upload :fileList="fileList" :action="action" @uploadSuccess="uploadSuccess"></cc-upload>
 8 |     </div>
 9 | 
10 |     <div class="demo">
11 |       <div class="demo-title">
12 |         自定义样式
13 |       </div>
14 |       <cc-upload :action="action">
15 |         <cc-button type='primary' round>上传图片</cc-button>
16 |       </cc-upload>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script setup lang="ts">
22 | import { FileListItem } from "@/components/cc-upload/cc-upload.vue"
23 | import { ref } from "vue"
24 | 
25 | let fileList = ref<FileListItem[]>([
26 |   {
27 |     image: 'https://img01.yzcdn.cn/vant/sand.jpg'
28 |   }
29 | ])
30 | let action = 'http://localhost:3000/upload'
31 | 
32 | let uploadSuccess = (val: any) => {
33 |   fileList.value.push({
34 |     image: val.path
35 |   })
36 |   console.log(val)
37 |   console.log(fileList.value)
38 | }
39 | </script>
40 | 
41 | <style scoped lang="scss">
42 | .demo {
43 |   margin: 20px;
44 |   &-title {
45 |     margin-bottom: 10px;
46 |   }
47 | }
48 | </style>


--------------------------------------------------------------------------------
/src/views/loadMore/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-load-more text="点击或上拉加载更多"></cc-load-more>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="demo">
11 |       <div class="demo-title">自定义样式</div>
12 |       <div class="demo-item">
13 |         <cc-load-more lineWidth="120" color="red" fontSize="20" text="点击或上拉加载更多"></cc-load-more>
14 |       </div>
15 |     </div>
16 | 
17 |     <div class="demo">
18 |       <div class="demo-title">加载更多</div>
19 |       <div class="demo-item">
20 |         <cc-load-more loading text="加载中"></cc-load-more>
21 |         <cc-load-more loading text="加载中" loadingType="spinner"></cc-load-more>
22 |       </div>
23 |     </div>
24 | 
25 |     <div class="demo">
26 |       <div class="demo-title">显示点</div>
27 |       <div class="demo-item">
28 |         <cc-load-more dot></cc-load-more>
29 |       </div>
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script setup lang="ts">
35 | 
36 | </script>
37 | 
38 | <style scoped lang="scss">
39 | .demo {
40 |   &-title {
41 |     padding: 10px;
42 |   }
43 |   &-item {
44 |     margin-bottom: 30px;
45 |   }
46 | }
47 | </style>


--------------------------------------------------------------------------------
/src/components/cc-layout/cc-row.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <component
 3 |     :is="tag"
 4 |     class="cc-row"
 5 |     :style="{
 6 |       'margin-left': margin,
 7 |       'margin-right': margin,
 8 |       'justify-content': justifyValue
 9 |     }"
10 |   >
11 |     <slot></slot>
12 |   </component>
13 | </template>
14 | 
15 | <script setup lang="ts">
16 | import { defineProps, computed, PropType } from 'vue'
17 | 
18 | type RowJustifyProps = '' | 'end' | 'center' | 'space-around' | 'space-between'
19 | 
20 | let props = defineProps({
21 |   gutter: {
22 |     type: [Number, String],
23 |     default: ''
24 |   },
25 |   tag: {
26 |     type: String,
27 |     default: 'div'
28 |   },
29 |   justify: {
30 |     type: String as PropType<RowJustifyProps>,
31 |     default: ''
32 |   }
33 | })
34 | let margin = computed(() => {
35 |   if (props.gutter) {
36 |     return '-' + ((props.gutter as number) / 2) + 'px'
37 |   }
38 |   return 0
39 | })
40 | 
41 | let justifyValue = computed(() => {
42 |   if (!props.justify) return 'flex-start'
43 |   else if (props.justify === 'end') return 'flex-end'
44 |   else return props.justify
45 | })
46 | 
47 | </script>
48 | 
49 | <style scoped lang="scss">
50 | .cc-row {
51 |   display: flex;
52 |   height: 100%;
53 | }
54 | </style>


--------------------------------------------------------------------------------
/src/views/contactCard/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="background: #f7f7f7;height: 100vh;">
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-contact-card type="add" @click="onAdd"></cc-contact-card>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="demo">
11 |       <div class="demo-title">编辑联系人</div>
12 |       <div class="demo-item">
13 |         <cc-contact-card type="edit" name="eason" tel="13888888888"></cc-contact-card>
14 |       </div>
15 |     </div>
16 | 
17 |     <div class="demo">
18 |       <div class="demo-title">不可编辑</div>
19 |       <div class="demo-item">
20 |         <cc-contact-card
21 |           type="edit"
22 |           name="eason"
23 |           tel="13888888888"
24 |           :editable="false"
25 |           @click="onAdd"
26 |         ></cc-contact-card>
27 |       </div>
28 |     </div>
29 |   </div>
30 | </template>
31 | 
32 | <script setup lang="ts">
33 | let onAdd = () => {
34 |   console.log('add')
35 | }
36 | </script>
37 | 
38 | <style scoped lang="scss">
39 | .demo {
40 |   &-title {
41 |     padding: 20px;
42 |   }
43 |   &-item {
44 |     margin-bottom: 30px;
45 |     &:last-child {
46 |       margin-bottom: 0;
47 |     }
48 |   }
49 | }
50 | </style>


--------------------------------------------------------------------------------
/src/views/swiper/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <cc-swiper :list="list" @change='onChange'></cc-swiper>
 6 |     </div>
 7 | 
 8 |     <div class="demo">
 9 |       <div class="demo-title">指示点样式</div>
10 |       <cc-swiper :list="list" mode="number"></cc-swiper>
11 |       <br />
12 |       <cc-swiper :list="list" mode="rect"></cc-swiper>
13 |       <br />
14 |       <cc-swiper :list="list" mode="none"></cc-swiper>
15 |     </div>
16 | 
17 |     <div class="demo">
18 |       <div class="demo-title">指示点位置和样式</div>
19 |       <cc-swiper :list="list" bottom="30" right="30" activeColor="red" indicatorActiveColor="blue"></cc-swiper>
20 |     </div>
21 | 
22 |   </div>
23 | </template>
24 | 
25 | <script setup lang="ts">
26 | let list = [
27 |   {
28 |     image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
29 |   },
30 |   {
31 |     image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
32 |   },
33 |   {
34 |     image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
35 |   }
36 | ]
37 | let onChange = (val: number) => {
38 |   console.log(val)
39 | }
40 | </script>
41 | 
42 | <style scoped lang="scss">
43 | .demo {
44 |   margin: 10px 0;
45 |   &-title {
46 |     margin: 10px 0;
47 |   }
48 | }
49 | </style>


--------------------------------------------------------------------------------
/src/views/contactList/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="background: #f7f7f7;height: 100vh;">
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-contact-list :list="list1" :value="value"></cc-contact-list>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="demo">
11 |       <div class="demo-title">禁用联系人</div>
12 |       <div class="demo-item">
13 |         <cc-contact-list :list="list2" :value="value"></cc-contact-list>
14 |       </div>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script setup lang="ts">
20 | import { ref } from 'vue'
21 | let value = ref('1')
22 | let list1 = [
23 |   {
24 |     id: '1',
25 |     name: '张三',
26 |     tel: '13000000000',
27 |     isDefault: true
28 |   },
29 |   {
30 |     id: '2',
31 |     name: '李四',
32 |     tel: '1310000000'
33 |   }
34 | ]
35 | let list2 = [
36 |   {
37 |     id: '1',
38 |     name: '张三',
39 |     tel: '13000000000',
40 |     isDefault: true
41 |   },
42 |   {
43 |     id: '2',
44 |     name: '李四',
45 |     tel: '1310000000',
46 |     disabled: true
47 |   }
48 | ]
49 | </script>
50 | 
51 | <style scoped lang="scss">
52 | .demo {
53 |   &-title {
54 |     padding: 20px;
55 |   }
56 |   &-item {
57 |     margin-bottom: 30px;
58 |     &:last-child {
59 |       margin-bottom: 0;
60 |     }
61 |   }
62 | }
63 | </style>


--------------------------------------------------------------------------------
/src/views/circleProgress/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="contanier">
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-circle-progress :percent="50"></cc-circle-progress>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="demo">
11 |       <div class="demo-title">自定义颜色</div>
12 |       <div class="demo-item">
13 |         <cc-circle-progress fillColor="#39b54a" layerColor='#123abc' :percent="60"></cc-circle-progress>
14 |       </div>
15 |     </div>
16 | 
17 |     <div class="demo">
18 |       <div class="demo-title">自定义宽度</div>
19 |       <div class="demo-item">
20 |         <cc-circle-progress strokeWidth="20" :percent="70"></cc-circle-progress>
21 |       </div>
22 |     </div>
23 | 
24 |     <div class="demo">
25 |       <div class="demo-title">自定义内容</div>
26 |       <div class="demo-item" style="font-size: 12px;">
27 |         <cc-circle-progress :percent="80">
28 |           <div>营业额</div>
29 |         </cc-circle-progress>
30 |       </div>
31 |     </div>
32 |   
33 |   </div>
34 | </template>
35 | 
36 | <script setup lang="ts">
37 | 
38 | </script>
39 | 
40 | <style scoped lang="scss">
41 | .contanier {
42 |   background: #fafafa;
43 |   height: 100vh;
44 |   .demo {
45 |     margin: 10px 0;
46 |     &-title {
47 |       padding: 10px 0;
48 |     }
49 |   }
50 | }
51 | </style>


--------------------------------------------------------------------------------
/src/views/submitBar/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="item">普通用法</div>
 4 |     <cc-submit-bar :price="3050" @submit="submit"></cc-submit-bar>
 5 |     <div class="item">禁止提交</div>
 6 |     <cc-submit-bar :price="3050" :disabled="true" @submit="submit"></cc-submit-bar>
 7 |     <div class="item">加载状态</div>
 8 |     <cc-submit-bar :price="3050" :loading="true"></cc-submit-bar>
 9 |     <div class="item">控制显示小数点位数</div>
10 |     <cc-submit-bar :price="3050" :decimalLength="1"></cc-submit-bar>
11 |     <div class="item">控制显示货币符号</div>
12 |     <cc-submit-bar :price="3050" :decimalLength="1" currency="$"></cc-submit-bar>
13 |     <div class="item">自定义按钮颜色和文字</div>
14 |     <cc-submit-bar :price="3050" buttonColor="#07c160" buttonText="结算"></cc-submit-bar>
15 |     <div class="item">自定义内容</div>
16 |     <cc-submit-bar :price="3050">
17 |       <input type="checkbox"  checked/>全选
18 |     </cc-submit-bar>
19 |     <div class="item">自定义顶部内容</div>
20 |     <cc-submit-bar :price="3050">
21 |       <template v-slot:tip>
22 |         你的收货地址不支持同城送,
23 |         <text style="color: #007AFF;">修改地址</text>
24 |       </template>
25 |     </cc-submit-bar>
26 |   </div>
27 | </template>
28 | 
29 | <script setup lang="ts">
30 | let submit = () => {
31 |   console.log('submit')
32 | }
33 | </script>
34 | 
35 | <style scoped>
36 | .item {
37 |   font-size: 18px;
38 |   font-weight: 700;
39 | }
40 | </style>


--------------------------------------------------------------------------------
/src/components/cc-layout/cc-col.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <component
 3 |     class="cc-col"
 4 |     :is="tag"
 5 |     :style="{  
 6 |     width,
 7 |       'margin-left': offset,
 8 |       'padding-left': padding,
 9 |       'padding-right': padding
10 |     }"
11 |   >
12 |    <slot></slot>
13 |   </component>
14 | </template>
15 | 
16 | <script setup lang="ts">
17 | import { defineProps, computed, getCurrentInstance } from 'vue'
18 | 
19 | let props = defineProps({
20 |   span: {
21 |     type: [Number, String],
22 |     default: ''
23 |   },
24 |   offset: {
25 |     type: [Number, String],
26 |     default: ''
27 |   },
28 |   tag: {
29 |     type: String,
30 |     default: 'div'
31 |   }
32 | })
33 | 
34 | // 获取组件实例
35 | let instance = getCurrentInstance()
36 | // 拿到父组件的gutter
37 | let gutter = instance?.parent?.props.gutter && instance?.parent?.props.gutter
38 | // 计算宽度
39 | let width = computed(() => {
40 |   return ((props.span as number) / 24 * 100)  === 0 ? '100%' : ((props.span as number) / 24 * 100) + '%'
41 | })
42 | // 计算传了gutter的padding值
43 | let padding = computed(() => {
44 |   if (gutter) {
45 |     return (gutter as number / 2) + 'px'
46 |   }
47 |   return 0
48 | })
49 | // 计算偏移量
50 | let offset = computed(() => {
51 |   if (props.offset) {
52 |     return ((props.offset as number) / 24 * 100) + '%'
53 |   }
54 |   return 0
55 | })
56 | 
57 | </script>
58 | 
59 | <style scoped lang="scss">
60 | .cc-col {
61 |   width: 100%;
62 | }
63 | </style>


--------------------------------------------------------------------------------
/src/components/cc-sticky/cc-sticky.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cc-sticky">
 3 |     <div class="cc-sticky-content" :style="{...fixedStyle}" ref="content"><slot></slot></div>
 4 |     <!-- 占位元素 -->
 5 |     <div v-if="fixedStyle" style="z-index: -1;" :style="{width: width + 'px', height: height + 'px'}"></div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup lang="ts">
10 | import { defineProps, ref, onMounted, CSSProperties } from 'vue'
11 | 
12 | let props = defineProps({
13 |   offsetTop: {
14 |     type: [String, Number],
15 |     default: 0
16 |   }
17 | })
18 | 
19 | let fixedStyle = ref<CSSProperties | null>(null)
20 | let content = ref()
21 | let left = ref<number>(0)
22 | let top = ref<number>(0)
23 | let width = ref<number>(0)
24 | let height = ref<number>(0)
25 | 
26 | 
27 | onMounted(() => {
28 |   top.value = content.value.offsetTop
29 |   left.value= content.value.offsetLeft
30 |   width.value= content.value.clientWidth
31 |   height.value= content.value.clientHeight
32 | 
33 |   document.addEventListener('scroll', () => {
34 |     let scrollTop: number = document.documentElement.scrollTop
35 |     if (scrollTop > top.value - Number(props.offsetTop)) {
36 |       fixedStyle.value = {
37 |         position: 'fixed',
38 |         top: props.offsetTop + 'px',
39 |         left: left.value + 'px'
40 |       }
41 |     } else {
42 |       fixedStyle.value = null
43 |     }
44 |   })
45 | })
46 | 
47 | </script>
48 | 
49 | <style scoped lang="scss">
50 | </style>


--------------------------------------------------------------------------------
/src/views/mask/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>
 4 |       <div class="title">基础用法</div>
 5 |       <div>
 6 |         <cc-mask v-model:show="show1" @click="handleClick"></cc-mask>
 7 |         <cc-button @click="open1">打开遮罩层</cc-button>
 8 |       </div>
 9 |     </div>
10 | 
11 |     <div>
12 |       <div class="title">嵌套内容</div>
13 |       <div>
14 |         <cc-mask v-model:show="show2">
15 |           <div class="content">
16 |             <div class="block"></div>
17 |           </div>
18 |         </cc-mask>
19 |         <cc-button @click="open2">打开遮罩层</cc-button>
20 |       </div>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script setup lang="ts">
26 | import { ref } from "vue"
27 | 
28 | let show1 = ref<boolean>(false)
29 | let show2 = ref<boolean>(false)
30 | let open1 = () => {
31 |   show1.value = true
32 | }
33 | let open2 = () => {
34 |   show2.value = true
35 | }
36 | let handleClick = () => {
37 |   console.log('click')
38 | }
39 | </script>
40 | 
41 | <style lang="scss" scoped>
42 | .title {
43 |   margin: #{topx(10)};
44 | }
45 | .item {
46 |   display: flex;
47 |   flex-wrap: wrap;
48 |   align-items: center;
49 |   margin: #{topx(10)};
50 |   div {
51 |     margin: #{topx(5)};
52 |   }
53 | }
54 | .content {
55 |   height: 100%;
56 |   display: flex;
57 |   align-items: center;
58 |   justify-content: center;
59 |   .block {
60 |     width: #{topx(120)};
61 |     height: #{topx(120)};
62 |     background-color: #fff;
63 |   }
64 | }
65 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 介绍
 2 | cc-ui是uni-app生态组件库, 宗旨是一切为了简单。
 3 | 
 4 | 因为作者儿子名字叫岑岑, 所以为组件库名字取名为cc, 算是送给儿子的礼物。
 5 | 
 6 | 本组件库使用vue3 + typescript开发, 全部组件有完整类型提示 。
 7 | 在维护此组件库的同时, 作者也会陆续维护uni-app版本和推出react版本, 敬请期待。
 8 | 
 9 | 欢迎大家star和pr。
10 | 
11 | ### 在线文档
12 | [cc-ui在线文档](https://ladychatterleylover.github.io/cc-ui-web/)
13 | 
14 | ### uni-app版
15 | [github](https://github.com/LadyChatterleyLover/cc-ui)
16 | 
17 | ### 在线预览
18 | 1. 你可以通过手机浏览器访问: [cc-ui](https://static-df19c143-c147-44fa-84a0-61752f5834cc.bspapp.com/cc-ui/#/), 如是用电脑浏览器访问, 请将浏览器设置为手机模式。
19 | 
20 | 
21 | 
22 | ### 版权信息
23 | cc-ui全部开源, 意味着您无需支付任何费用，也无需授权，即可将cc-ui应用到您的产品中。
24 | 注意：这并不意味着您可以将cc-ui应用到非法的领域，比如涉及赌博，暴力等方面。如因此产生纠纷等法律问题, cc-ui不承担任何责任。
25 | 
26 | ### 捐赠cc-ui的开发
27 | 因为目前作者是一个人开发, 没有团队, 所有的开发和维护都是由一个人完成, 经常爆肝到凌晨。在此, 我希望看到这段话的你, 能够加入到组件库的开发和维护工作当中来, 毕竟开源不易, 何况作者这种中年程序员, 又要带娃, 又要敲代码, 更是困难。
28 | 
29 | #### cc-ui交流群: 868811435
30 | 请备注: cc-ui
31 | 
32 | 因为组件库和文档完全开源, 如果cc-ui能帮助到你的工作和学习, 请不要吝啬你的大方, 捐赠无门槛, 哪怕是一瓶可乐也好, 当然这完全看个人意愿。
33 | 
34 | <div>
35 |  <img width='300' height='300' alt='微信收款' src='https://static-df19c143-c147-44fa-84a0-61752f5834cc.bspapp.com/static/1.jpeg'>
36 |  <img style='margin-left: 30px' width='300' height='300' alt='微信收款' src='https://static-df19c143-c147-44fa-84a0-61752f5834cc.bspapp.com/static/2.jpeg'>
37 | </div>
38 | 
39 | <br>
40 | 
41 | ### 友情链接
42 | [WOOCMS-快速开发内容管理系统](https://wooadmin.cn/)
43 | <br>
44 | <img width='300' height='300' src='https://static-df19c143-c147-44fa-84a0-61752f5834cc.bspapp.com/static/wooadmin.png'>


--------------------------------------------------------------------------------
/src/views/rate/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="title">基础用法</div>
 4 |     <div class="item">
 5 |       <cc-rate @change="change" v-model:value="value1"></cc-rate>
 6 |     </div>
 7 |   </div>
 8 | 
 9 |   <div>
10 |     <div class="title">星星总数</div>
11 |     <div class="item">
12 |       <cc-rate :count='10' v-model:value="value2"></cc-rate>
13 |     </div>
14 |   </div>
15 | 
16 |   <div>
17 |     <div class="title">自定义图标</div>
18 |     <div class="item">
19 |       <cc-rate activeIcon='heart-filled' inactiveIcon='heart' v-model:value="value1"></cc-rate>
20 |     </div>
21 |   </div>
22 | 
23 |   <div>
24 |     <div class="title">禁用状态</div>
25 |     <div class="item">
26 |       <cc-rate disabled v-model:value="value1"></cc-rate>
27 |     </div>
28 |   </div>
29 | 
30 |   <div>
31 |     <div class="title">只读状态</div>
32 |     <div class="item">
33 |       <cc-rate readonly v-model:value="value1"></cc-rate>
34 |     </div>
35 |   </div>
36 | 
37 |   <div>
38 |     <div class="title">最小选择数</div>
39 |     <div class="item">
40 |       <cc-rate :min-count='5' :count='10' v-model:value="value1"></cc-rate>
41 |     </div>
42 |   </div>
43 | </template>
44 | 
45 | <script setup lang="ts">
46 | let value1 = 3
47 | let value2 = 6
48 | 
49 | let change = (val: number) => {
50 |   console.log('change', val)
51 | }
52 | </script>
53 | 
54 | <style scoped lang="scss">
55 | .title {
56 |   margin: #{topx(10)};
57 | }
58 | .item {
59 |   display: flex;
60 |   flex-wrap: wrap;
61 |   align-items: center;
62 |   button {
63 |     margin-right: #{topx(5)};
64 |   }
65 | }
66 | </style>


--------------------------------------------------------------------------------
/src/components/cc-form/cc-form.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | import { ref, defineProps, defineExpose, getCurrentInstance, provide, PropType } from 'vue'
 9 | import { RuleItem, Callback } from './types'
10 | import mitt from 'mitt'
11 | 
12 | 
13 | export interface Rules {
14 |   [key: string]: RuleItem[]
15 | }
16 | 
17 | let formMitt = mitt()
18 | let props = defineProps({
19 |   model: {
20 |     type: Object,
21 |     required: true
22 |   },
23 |   rules: {
24 |     type: Object as PropType<Rules>,
25 |     required: true
26 |   }
27 | })
28 | 
29 | // 派发数据给子组件
30 | let instance = getCurrentInstance()
31 | provide('form', instance)
32 | 
33 | 
34 | let fields = ref<any[]>([])
35 | formMitt.on('formFieldAdd', field => {
36 |   fields.value.push(field)
37 | })
38 | 
39 | // 验证方法
40 | let validate = (callback: Callback) => {
41 |   // 所有需要验证表单项的结果
42 |   if (fields.value && fields.value.length) {
43 |     let tasks = fields.value.map((item: any) => item.ctx.validate())
44 |     Promise.all(tasks)
45 |       .then(res => {
46 |         let result = res.every(item => item === true)
47 |         callback(result)
48 |       })
49 |       .catch(() => callback(false))
50 |   }
51 | }
52 | 
53 | // 重置表单值
54 | let resetFields = () => {
55 |   if (fields.value && fields.value.length) {
56 |     fields.value.map((item: any) => {
57 |       item.ctx.resetField()
58 |     })
59 |   }
60 | }
61 | 
62 | defineExpose({
63 |   validate,
64 |   resetFields
65 | })
66 | </script>
67 | 
68 | <style scoped lang="scss">
69 | </style>


--------------------------------------------------------------------------------
/src/views/countdown/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-count-down :time="time"></cc-count-down>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="demo">
11 |       <div class="demo-title">分隔符为中文</div>
12 |       <div class="demo-item">
13 |         <cc-count-down separator="zh" :time="time"></cc-count-down>
14 |       </div>
15 |     </div>
16 | 
17 |     <div class="demo">
18 |       <div class="demo-title">自定义样式</div>
19 |       <div class="demo-item">
20 |         <cc-count-down :time="time">
21 |           <template #default="{ timeData }">
22 |             <span class="block">{{ timeData.hours }}</span>
23 |             <span class="colon">:</span>
24 |             <span class="block">{{ timeData.minutes }}</span>
25 |             <span class="colon">:</span>
26 |             <span class="block">{{ timeData.seconds }}</span>
27 |           </template>
28 |         </cc-count-down>
29 |       </div>
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script setup lang="ts">
35 | import { ref } from "vue"
36 | 
37 | let time = ref<number>(1000 * 60 * 60 * 3)
38 | </script>
39 | 
40 | <style scoped lang='scss'>
41 | .demo {
42 |   margin-bottom: 20px;
43 |   &-title {
44 |     padding: 10px;
45 |   }
46 | }
47 | .colon {
48 |   display: inline-block;
49 |   margin: 0 4px;
50 |   color: #ee0a24;
51 | }
52 | .block {
53 |   display: inline-block;
54 |   width: 22px;
55 |   color: #fff;
56 |   font-size: 12px;
57 |   text-align: center;
58 |   background-color: #ee0a24;
59 | }
60 | </style>


--------------------------------------------------------------------------------
/src/views/form/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <cc-form :model="model" :rules="rules" ref="form">
 3 |     <cc-form-item leftIcon="person" label="用户名" prop="username">
 4 |       <cc-field v-model:value="model.username" :border="false"></cc-field>
 5 |     </cc-form-item>
 6 |     <cc-form-item label="密码" prop="password">
 7 |       <cc-field type="password" v-model:value="model.password" :border="false"></cc-field>
 8 |     </cc-form-item>
 9 |     <cc-form-item label="验证码">
10 |       <cc-field type="password" v-model:value="model.code" :border="false"></cc-field>
11 |     </cc-form-item>
12 |     <cc-form-item>
13 |       <cc-button type="primary" @click="submit">提交</cc-button>
14 |       <cc-button style="margin-left: 30px;" @click="reset">重置</cc-button>
15 |     </cc-form-item>
16 |   </cc-form>
17 | </template>
18 | 
19 | <script setup lang="ts">
20 | import { ref } from 'vue'
21 | 
22 | let model = ref<any>({
23 |   username: '',
24 |   password: '',
25 |   code: '',
26 | })
27 | let rules = ref<any>({
28 |   username: [
29 |     {
30 |       required: true,
31 |       message: '用户名不能为空',
32 |       trigger: 'blur'
33 |     },
34 |     {
35 |       min: 2,
36 |       max: 6,
37 |       message: '用户名2-6位之间',
38 |       trigger: 'blur'
39 |     }
40 |   ],
41 |   password: [
42 |     {
43 |       required: true,
44 |       message: '密码不能为空',
45 |       trigger: 'blur'
46 |     }
47 |   ]
48 | })
49 | let form = ref()
50 | 
51 | let submit = () => {
52 |   form.value.validate((valid: any) => {
53 |     if (valid) {
54 |       console.log('success', model.value)
55 |     } else {
56 |       console.log('fail')
57 |     }
58 |   })
59 | }
60 | let reset = () => {
61 |   form.value.resetFields()
62 | }
63 | </script>
64 | 
65 | <style scoped lang="scss">
66 | </style>


--------------------------------------------------------------------------------
/src/views/goodsCard/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-goods-card
 7 |           num="2"
 8 |           price="2.00"
 9 |           desc="描述信息"
10 |           title="商品标题"
11 |           thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
12 |         ></cc-goods-card>
13 |       </div>
14 |     </div>
15 | 
16 |     <div class="demo">
17 |       <div class="demo-title">营销信息</div>
18 |       <div class="demo-item">
19 |         <cc-goods-card
20 |           num="2"
21 |           tag="标签"
22 |           price="2.00"
23 |           desc="描述信息"
24 |           title="商品标题"
25 |           thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
26 |           origin-price="10.00"
27 |         ></cc-goods-card>
28 |       </div>
29 |     </div>
30 | 
31 |     <div class="demo">
32 |       <div class="demo-title">自定义内容</div>
33 |       <div class="demo-item">
34 |         <cc-goods-card
35 |           num="2"
36 |           :price="2.00"
37 |           desc="描述信息"
38 |           title="商品标题"
39 |           thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
40 |         >
41 |           <template #tags>
42 |             <cc-tag plain type="error" style="margin-right: 10rpx;">标签</cc-tag>
43 |             <cc-tag plain type="error">标签</cc-tag>
44 |           </template>
45 |           <template #footer>
46 |             <cc-tag size="mini" style="margin-right: 5px;">按钮</cc-tag>
47 |             <cc-tag size="mini">按钮</cc-tag>
48 |           </template>
49 |         </cc-goods-card>
50 |       </div>
51 |     </div>
52 |   </div>
53 | </template>
54 | 
55 | <script setup lang="ts">
56 | 
57 | </script>
58 | 
59 | <style scoped lang="scss">
60 | .demo {
61 |   &-title {
62 |     padding: 10px;
63 |   }
64 |   &-item {
65 |     margin-bottom: 30px;
66 |   }
67 | }
68 | </style>


--------------------------------------------------------------------------------
/src/components/cc-coupon-cell/cc-coupon-cell.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cc-coupon-cell">
 3 |     <cc-cell :title="cellTitle" :value="cellValue" isLink @click="clickCell"></cc-cell>
 4 |     <slot></slot>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup lang="ts">
 9 | import { defineProps, defineEmits, PropType, ref, computed, onMounted } from 'vue'
10 | import events from '@/utils/events'
11 | 
12 | export interface CouponItemRadioListItem {
13 |   value: string | number,
14 |   checkedColor: string
15 | }
16 | 
17 | export interface CouponItem {
18 |   id: string,
19 |   name: string,
20 |   condition?: string,
21 |   startAt?: number,
22 |   endAt?: number,
23 |   description?: string,
24 |   reason?: string,
25 |   value?: number,
26 |   valueDesc?: string,
27 |   unitDesc?: string,
28 |   startTime?: string,
29 |   endTime?: string,
30 |   radioList: CouponItemRadioListItem[]
31 | }
32 | 
33 | 
34 | let props = defineProps({
35 |   // 单元格标题
36 |   title: {
37 |     type: String,
38 |     default: '优惠券'
39 |   },
40 |   // 当前选中优惠券的索引
41 |   chosenCoupon: {
42 |     type: [Number, String],
43 |     default: -1
44 |   },
45 |   coupons: {
46 |     type: Array as PropType<CouponItem[]>,
47 |     default: () => []
48 |   },
49 |   // 货币符号
50 |   currency: {
51 |     type: String,
52 |     default: '￥'
53 |   }
54 | })
55 | let emits = defineEmits(['click'])
56 | 
57 | let cellTitle = ref<string>(props.title)
58 | let cellValue = ref<string>('')
59 | 
60 | let clickCell = () => {
61 |   emits('click')
62 | }
63 | 
64 | onMounted(() => {
65 |   cellValue.value = `${props.coupons.length}张可用`
66 |   events.on('changeCoupon', (val: any) => {
67 |     if (val) cellValue.value = `-${props.currency} ${(val.value / 100).toFixed(2)}`
68 |     else cellValue.value = `${props.coupons.length}张可用`
69 |   })
70 | })
71 | </script>
72 | 
73 | <style scoped lang="scss">
74 | </style>


--------------------------------------------------------------------------------
/src/views/divider/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>
 4 |       <div class="title">基础用法</div>
 5 |       <div class="item">
 6 |         <cc-divider></cc-divider>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div>
11 |       <div class="title">设置宽度</div>
12 |       <div class="item">
13 |         百分比
14 |         <cc-divider width="50%"></cc-divider>
15 |       </div>
16 |       <div class="item">
17 |         rpx
18 |         <cc-divider width="500"></cc-divider>
19 |       </div>
20 |     </div>
21 | 
22 |     <div>
23 |       <div class="title">展示文字</div>
24 |       <div class="item">
25 |         <cc-divider>
26 |           渡日月,穿山水
27 |         </cc-divider>
28 |       </div>
29 |     </div>
30 | 
31 |     <div>
32 |       <div class="title">展示文字自定义宽度</div>
33 |       <div class="item">
34 |         <cc-divider width='108'>
35 |           尚在恨那谁
36 |         </cc-divider>
37 |       </div>
38 |     </div>
39 | 
40 |     <div>
41 |       <div class="title">内容位置</div>
42 |       <div class="item">
43 |         <cc-divider position='left'>
44 |           谁曾无坚不摧,摧毁的废墟
45 |         </cc-divider>
46 |       </div>
47 |       <div class="item">
48 |         <cc-divider position='right'>
49 |           一早变作了满山青翠
50 |         </cc-divider>
51 |       </div>
52 |     </div>
53 | 
54 | 
55 |     <div>
56 |       <div class="title">自定义样式</div>
57 |       <div class="item">
58 |         <cc-divider color='#fa3534'>
59 |           <div style="color: #1989fa;">带笑归去</div>
60 |         </cc-divider>
61 |       </div>
62 |     </div>
63 |   </div>
64 | </template>
65 | 
66 | <script lang="ts" setup>
67 | </script>
68 | 
69 | <style scoped lang="scss">
70 | .title {
71 |   margin: #{topx(10)};
72 | }
73 | .item {
74 |   display: flex;
75 |   flex-wrap: wrap;
76 |   align-items: center;
77 |   margin: #{topx(10)};
78 |   div {
79 |     margin: #{topx(5)};
80 |   }
81 | }
82 | </style>


--------------------------------------------------------------------------------
/src/components/cc-load-more/cc-load-more.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="cc-load-more"
 4 |     :style="{ marginTop: marginTop + 'rpx', marginBottom: marginBottom + 'rpx' }"
 5 |   >
 6 |     <cc-divider :width="lineWidth">
 7 |       <div v-if="dot" class="cc-load-more-dot"></div>
 8 |       <div class="cc-load-more-content" v-else>
 9 |         <div v-if="loading">
10 |           <cc-loading :size="loadingType === 'circle' ? '12' : '20'" :type="loadingType"></cc-loading>
11 |         </div>
12 |         <div :style="{ color, fontSize: fontSize + 'px' }">{{ text }}</div>
13 |       </div>
14 |     </cc-divider>
15 |   </div>
16 | </template>
17 | 
18 | <script setup lang="ts">
19 | import { defineProps } from 'vue'
20 | 
21 | let props = defineProps({
22 |   // 加载文案
23 |   text: {
24 |     type: String,
25 |     default: ''
26 |   },
27 |   // 线条宽度
28 |   lineWidth: {
29 |     type: [Number, String],
30 |     default: 80
31 |   },
32 |   // 是否加载中
33 |   loading: {
34 |     type: Boolean,
35 |     default: false
36 |   },
37 |   // 文字颜色
38 |   color: {
39 |     type: String,
40 |     default: '#606266'
41 |   },
42 |   // 文字大小
43 |   fontSize: {
44 |     type: [Number, String],
45 |     default: 14
46 |   },
47 |   // 与前一个元素的距离
48 |   marginTop: {
49 |     type: [Number, String],
50 |     default: 14
51 |   },
52 |   // 与后一个元素的距离
53 |   marginBottom: {
54 |     type: [String, Number],
55 |     default: 0
56 |   },
57 |   // 加载图标类型
58 |   loadingType: {
59 |     type: String,
60 |     default: 'circle'
61 |   },
62 |   // 是否显示点的模式
63 |   dot: {
64 |     type: Boolean,
65 |     default: false
66 |   }
67 | })
68 | </script>
69 | 
70 | <style scoped lang="scss">
71 | .cc-load-more {
72 |   &-dot {
73 |     height: 10px;
74 |     width: 10px;
75 |     background: #606266;
76 |     border-radius: 100%;
77 |   }
78 |   &-content {
79 |     display: flex;
80 |     align-items: center;
81 |   }
82 | }
83 | </style>


--------------------------------------------------------------------------------
/src/components/cc-avatar/cc-avatar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="cc-avatar"
 4 | 
 5 |     :style="{ width: avatarWidth + 'px', height: avatarHeight + 'px',borderRadius: round ? '100%' : '0' }"
 6 |   >
 7 | 
 8 |     <img :mode='imgMode' @error='handleError' v-if="src && !error"  :style="{ borderRadius: round ? '100%' : '5px' }" class="cc-avatar-img" :src="src" />
 9 |     <slot v-else></slot>
10 |   </div>
11 |   
12 | </template>
13 | 
14 | <script setup lang="ts">
15 | import { computed, defineProps, defineEmits, PropType, useSlots, ref } from 'vue'
16 | 
17 | type AvatarSizeProps = '' | 'large' | 'small' | 'number'
18 | 
19 | let slots = useSlots()
20 | let props = defineProps({
21 |   // 头像路径
22 |   src: {
23 |     type: String,
24 |     default: ''
25 |   },
26 |   // 是否圆形图片
27 |   round: {
28 |     type: Boolean,
29 |     default: true
30 |   },
31 |   // 尺寸
32 |   size: {
33 |     type: String as PropType<AvatarSizeProps>,
34 |     default: ''
35 |   },
36 |   // 图片模式
37 |   imgMode: {
38 |     type: String,
39 |     default: 'aspectFill'
40 |   }
41 | })
42 | let emits = defineEmits(['error'])
43 | let error = ref<boolean>(false)
44 | 
45 | let avatarWidth = computed(() => {
46 |   if (!props.size) return 38
47 |   else if (props.size === 'large') return 60
48 |   else if (props.size === 'small') return 30
49 |   else return props.size
50 | })
51 | 
52 | let avatarHeight = computed(() => {
53 |   if (!props.size) return 38
54 |   else if (props.size === 'large') return 60
55 |   else if (props.size === 'small') return 30
56 |   else return props.size
57 | })
58 | 
59 | 
60 | let handleError = () => {
61 |   error.value = true
62 |   emits('error')
63 | }
64 | </script>
65 | 
66 | <style scoped lang="scss">
67 | .cc-avatar {
68 |   display: flex;
69 |   align-items: center;
70 |   justify-content: center;
71 |   font-size: 14px;
72 |   color: #fff;
73 |   background: #c0c4cc;
74 |   &-img {
75 |     width: 100%;
76 |     height: 100%;
77 |   }
78 | }
79 | </style>


--------------------------------------------------------------------------------
/src/views/loading/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <div>
 7 |           <cc-loading></cc-loading>
 8 |         </div>
 9 |         <div>
10 |           <cc-loading type='spinner'></cc-loading>
11 |         </div>
12 |       </div>
13 |     </div>
14 | 
15 |     <div class="demo">
16 |       <div class="demo-title">自定义颜色</div>
17 |       <div class="demo-item">
18 |         <div>
19 |           <cc-loading color="#0081ff"></cc-loading>
20 |         </div>
21 |       </div>
22 |     </div>
23 | 
24 |     <div class="demo">
25 |       <div class="demo-title">自定义大小</div>
26 |       <div class="demo-item">
27 |         <div>
28 |           <cc-loading size="30"></cc-loading>
29 |         </div>
30 |       </div>
31 |     </div>
32 | 
33 |     <div class="demo">
34 |       <div class="demo-title">加载文案</div>
35 |       <div class="demo-item">
36 |         <div>
37 |           <cc-loading>加载中...</cc-loading>
38 |         </div>
39 |       </div>
40 |     </div>
41 | 
42 |     <div class="demo">
43 |       <div class="demo-title">垂直排列</div>
44 |       <div class="demo-item">
45 |         <div>
46 |           <cc-loading vertical>加载中...</cc-loading>
47 |         </div>
48 |       </div>
49 |     </div>
50 | 
51 |     <div class="demo">
52 |       <div class="demo-title">自定义文本颜色和大小</div>
53 |       <div class="demo-item">
54 |         <div>
55 |           <cc-loading textColor='#0081ff' textSize='20'>加载中...</cc-loading>
56 |         </div>
57 |       </div>
58 |     </div>
59 |   </div>
60 | </template>
61 | 
62 | <script setup lang="ts">
63 | 
64 | </script>
65 | 
66 | <style scoped lang="scss">
67 | .demo {
68 |   margin-bottom: #{topx(20)};
69 |   padding: #{topx(10)};
70 |   &-title {
71 |     padding: #{topx(10)};
72 |   }
73 |   &-item {
74 |     padding: 0 5px;
75 |     margin-bottom: 10px;
76 |     display: flex;
77 |     div {
78 |       margin-right: 10px;
79 |     }
80 |   }
81 | }
82 | </style>


--------------------------------------------------------------------------------
/src/views/progress/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="container">
 4 |       <div class="item">
 5 |         <div>普通进度条</div>
 6 |         <cc-progress :percentage="35.5"></cc-progress>
 7 |       </div>
 8 |       <div class="item">
 9 |         <div>普通进度条控制高度</div>
10 |         <cc-progress :percentage="62.3" :stroke-width="24"></cc-progress>
11 |       </div>
12 |       <div class="item">
13 |         <div>文字内显</div>
14 |         <cc-progress :percentage="70" :text-inside="true" :stroke-width="24"></cc-progress>
15 |       </div>
16 |       <div class="item">
17 |         <div>文字内显且控制高度</div>
18 |         <cc-progress :percentage="33.8" :text-inside="true" :stroke-width="32"></cc-progress>
19 |       </div>
20 |       <div class="item">
21 |         <div>自定义底色</div>
22 |         <cc-progress :percentage="66" in-bg-color="#abc123"></cc-progress>
23 |       </div>
24 |       <div class="item">
25 |         <div>自定义颜色</div>
26 |         <cc-progress :percentage="66" bg-color="#f46"></cc-progress>
27 |       </div>
28 |       <div class="item">
29 |         <h2>自定义显示内容</h2>
30 |         <cc-progress :percentage="66" bg-color="#f46" :line-data="true">
31 |           <template v-slot:content>
32 |             转化率(日同比 66%)
33 |           </template>
34 |         </cc-progress>
35 |       </div>
36 |       <div class="item">
37 |         <div>不显示进度</div>
38 |         <cc-progress :percentage="66" bg-color="#f46" :noData="true"></cc-progress>
39 |       </div>
40 |       <div class="item">
41 |         <div>进度条加载动画</div>
42 |         <cc-progress :percentage="33.3" bg-color="#f46" :is-animate="true"></cc-progress>
43 |       </div>
44 |       <div class="item">
45 |         <div>设置加载动画时间</div>
46 |         <cc-progress :percentage="50" bg-color="#f46" :is-animate="true" :duration="5000"></cc-progress>
47 |       </div>
48 |     </div>
49 |   </div>
50 | </template>
51 | 
52 | <script setup lang="ts">
53 | 
54 | </script>
55 | 
56 | <style scoped lang="scss">
57 | .item {
58 |   margin: 20px 0;
59 | }
60 | </style>


--------------------------------------------------------------------------------
/src/views/skeleton/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="title">基础用法</div>
 4 |     <div class="item">
 5 |       <cc-skeleton title :row="3"></cc-skeleton>
 6 |     </div>
 7 |   </div>
 8 | 
 9 |   <div>
10 |     <div class="title">展示头像</div>
11 |     <div class="item">
12 |       <cc-skeleton title avatar :row="3"></cc-skeleton>
13 |     </div>
14 |   </div>
15 | 
16 |   <div>
17 |     <div class="title">头像大小</div>
18 |     <div class="item">
19 |       <cc-skeleton title avatar avatarSize="40" :row="3"></cc-skeleton>
20 |     </div>
21 |   </div>
22 | 
23 |   <div>
24 |     <div class="title">方形头像</div>
25 |     <div class="item">
26 |       <cc-skeleton title avatar avatarSize="40" :round="false" :row="3"></cc-skeleton>
27 |     </div>
28 |   </div>
29 | 
30 |   <div>
31 |     <div class="title">展示动画</div>
32 |     <div class="item">
33 |       <cc-skeleton animate title avatar :row="5"></cc-skeleton>
34 |     </div>
35 |   </div>
36 | 
37 |   <div>
38 |     <div class="title">自定义颜色</div>
39 |     <div class="item">
40 |       <cc-skeleton bgColor='red' title avatar :row="5"></cc-skeleton>
41 |     </div>
42 |   </div>
43 | 
44 |   <div>
45 |     <div class="title">控制显示</div>
46 |     <cc-button size='small' type='primary' @click="handleClick">
47 |       点击2秒之后骨架屏消失
48 |       </cc-button>
49 |     <div class="item" v-if="loading">
50 |       <cc-skeleton :loading='loading' title :row="3"></cc-skeleton>
51 |     </div>
52 |     <div v-if="!loading">
53 |       你的背包,让我走的好缓慢
54 |     </div>
55 |   </div>
56 | </template>
57 | 
58 | <script setup lang="ts">
59 | import { ref } from 'vue'
60 | let loading = ref<boolean>(true)
61 | let handleClick = () => {
62 |   setTimeout(() => {
63 |     loading.value = false
64 |   }, 2000)
65 | }
66 | 
67 | </script>
68 | 
69 | <style scoped lang='scss'>
70 | .title {
71 |   margin: #{topx(10)};
72 | }
73 | .item {
74 |   display: flex;
75 |   flex-wrap: wrap;
76 |   align-items: center;
77 |   button {
78 |     margin-right: #{topx(5)};
79 |   }
80 | }
81 | </style>


--------------------------------------------------------------------------------
/src/views/coupon/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-coupon-cell @click="show = true" :coupons="coupons">
 7 |           <cc-popup height="1000" round v-model:show="show" mode="bottom">
 8 |             <cc-coupon-list :coupons="coupons" :disabled-coupons="disabledCoupons"></cc-coupon-list>
 9 |           </cc-popup>
10 |         </cc-coupon-cell>
11 |       </div>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script setup lang="ts">
17 | import { ref } from "vue"
18 | 
19 | let show = ref<boolean>(false)
20 | let coupons = [
21 |   {
22 |     available: 1,
23 |     condition: '无使用门槛\n最多优惠12元',
24 |     reason: '',
25 |     value: 150,
26 |     name: '优惠券名称',
27 |     startAt: 1489104000,
28 |     endAt: 1514592000,
29 |     valueDesc: '1.5',
30 |     unitDesc: '元',
31 |     description: '描述信息'
32 |   },
33 |   {
34 |     available: 1,
35 |     condition: '无使用门槛\n最多优惠12元',
36 |     reason: '',
37 |     value: 300,
38 |     name: '优惠券名称',
39 |     startAt: 1489104000,
40 |     endAt: 1514592000,
41 |     valueDesc: '3.0',
42 |     unitDesc: '元',
43 |     description: '描述信息'
44 |   }
45 | ]
46 | 
47 | let disabledCoupons = [
48 |   {
49 |     available: 1,
50 |     condition: '无使用门槛\n最多优惠12元',
51 |     value: 150,
52 |     name: '优惠券名称',
53 |     startAt: 1489104000,
54 |     endAt: 1514592000,
55 |     valueDesc: '1.5',
56 |     unitDesc: '元',
57 |     reason: '优惠券不可用描述信息'
58 |   },
59 |   {
60 |     available: 1,
61 |     condition: '无使用门槛\n最多优惠12元',
62 |     value: 150,
63 |     name: '优惠券名称',
64 |     startAt: 1489104000,
65 |     endAt: 1514592000,
66 |     valueDesc: '1.5',
67 |     unitDesc: '元',
68 |     reason: '优惠券不可用描述信息'
69 |   }
70 | ]
71 | </script>
72 | 
73 | <style scoped lang="scss">
74 | .demo {
75 |   height: 100vh;
76 |   background: #f7f7f7;
77 |   padding: 10px;
78 |   &-title {
79 |     padding: 10px;
80 |   }
81 |   &-item {
82 |     padding: 0 5px;
83 |     margin-bottom: 10px;
84 |   }
85 | }
86 | </style>


--------------------------------------------------------------------------------
/src/views/switch/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demo">
 3 |     <div class="demo-title">基础用法</div>
 4 |     <div class="demo-item">
 5 |       <div>
 6 |         <cc-switch v-model:value="checked"></cc-switch>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="demo-title">禁用状态</div>
11 |     <div class="demo-item">
12 |       <div>
13 |         <cc-switch disabled v-model:value="checked"></cc-switch>
14 |       </div>
15 |     </div>
16 | 
17 |     <div class="demo-title">自定义颜色</div>
18 |     <div class="demo-item">
19 |       <div>
20 |         <cc-switch activeColor="#ee0a24" inactiveColor="#abc123" v-model:value="checked"></cc-switch>
21 |       </div>
22 |     </div>
23 | 
24 |     <div class="demo-title">自定义尺寸</div>
25 |     <div class="demo-item">
26 |       <div>
27 |         <cc-switch size="16" v-model:value="checked"></cc-switch>
28 |       </div>
29 |       <div>
30 |         <cc-switch size="36" v-model:value="checked"></cc-switch>
31 |       </div>
32 |     </div>
33 | 
34 |     <div class="demo-title">文字显示</div>
35 |     <div class="demo-item">
36 |       <div>
37 |         <cc-switch v-model:value="checked" activeText="搁浅"></cc-switch>
38 |       </div>
39 |       <div>
40 |         <cc-switch v-model:value="checked" activeText="威廉古堡" inactiveText='双节棍'></cc-switch>
41 |       </div>
42 |       <div>
43 |         <cc-switch v-model:value="checked"  activeTextColor="#ee0a24" inactiveTextColor="#abc123" activeText="黑色幽默"></cc-switch>
44 |       </div>
45 |     </div>
46 |   </div>
47 | </template>
48 | 
49 | <script setup lang="ts">
50 | import { ref } from "vue"
51 | let dialog = ref()
52 | let checked = ref<boolean>(false)
53 | 
54 | let onChange = (val: boolean) => {
55 |   checked.value = val
56 | }
57 | let confirm = () => {
58 | 
59 | }
60 | </script>
61 | 
62 | <style scoped lang="scss">
63 | .demo {
64 |   margin-bottom: #{topx(20)};
65 |   &-title {
66 |     padding: #{topx(10)};
67 |   }
68 |   &-item {
69 |     display: flex;
70 |     align-items: center;
71 |     margin-left: #{topx(2)};
72 |     div {
73 |       margin-left: #{topx(15)};
74 |     }
75 |   }
76 | }
77 | </style>


--------------------------------------------------------------------------------
/src/components/cc-circle-progress/cc-circle-progress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cc-circle-progress" :style="{ width: width + 'px', height: height + 'px' }">
 3 |     <svg viewBox="0 0 1040 1040">
 4 |       <path
 5 |         d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
 6 |         class="cc-circle-progress-layer"
 7 |         style="fill: none;"
 8 |         :style="{ strokeWidth: strokeWidth + 'px', stroke: layerColor }"
 9 |       />
10 |       <path
11 |         d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
12 |         class="cc-circle-progress-hover"
13 |         :style="{
14 |           strokeWidth: (Number(strokeWidth) + 1) + 'px',
15 |           strokeDasharray,
16 |           stroke: fillColor
17 |         }"
18 |       />
19 |     </svg>
20 |     <slot v-if="$slots.default"></slot>
21 |     <div v-else>{{ percent }}%</div>
22 |   </div>
23 | </template>
24 | 
25 | <script setup lang="ts">
26 | import { computed, defineProps } from 'vue'
27 | 
28 | let props = defineProps({
29 |   percent: {
30 |     type: [Number, String],
31 |     default: 0
32 |   },
33 |   width: {
34 |     type: [Number, String],
35 |     default: 100
36 |   },
37 |   height: {
38 |     type: [Number, String],
39 |     default: 100
40 |   },
41 |   strokeWidth: {
42 |     type: [Number, String],
43 |     default: 40
44 |   },
45 |   layerColor: {
46 |     type: String,
47 |     default: '#fff',
48 |   },
49 |   fillColor: {
50 |     type: String,
51 |     default: '#0081ff',
52 |   }
53 | })
54 | 
55 | let strokeDasharray = computed(() => {
56 |   let x = 314 * Number(props.percent) / 10
57 |   return `${x}px, 3140px`
58 | })
59 | </script>
60 | 
61 | <style scoped lang="scss">
62 | .cc-circle-progress {
63 |   position: relative;
64 |   display: flex;
65 |   justify-content: center;
66 |   align-items: center;
67 |   font-size: 14px;
68 |   &-layer {
69 |   }
70 |   &-hover {
71 |     fill: none;
72 |     stroke-linecap: round;
73 |   }
74 |   svg {
75 |     position: absolute;
76 |     top: 0;
77 |     left: 0;
78 |     width: 100%;
79 |     height: 100%;
80 |   }
81 | }
82 | </style>


--------------------------------------------------------------------------------
/src/views/numberKeyboard/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-button @click="show1 = true">打开键盘</cc-button>
 7 |         <cc-number-keyboard @backspace="backspace" @change="handleChange" v-model:value="show1"></cc-number-keyboard>
 8 |       </div>
 9 |       <div>当前输入值: {{ value1 }}</div>
10 |     </div>
11 | 
12 |     <div class="demo">
13 |       <div class="demo-title">身份证键盘</div>
14 |       <div class="demo-item">
15 |         <cc-button @click="show2 = true">打开键盘</cc-button>
16 |         <cc-number-keyboard extra-key='x' v-model:value="show2"></cc-number-keyboard>
17 |       </div>
18 |     </div>
19 | 
20 |     <div class="demo">
21 |       <div class="demo-title">随机数字键盘</div>
22 |       <div class="demo-item">
23 |         <cc-button @click="show3 = true">打开键盘</cc-button>
24 |         <cc-number-keyboard random  v-model:value="show3"></cc-number-keyboard>
25 |       </div>
26 |     </div>
27 | 
28 |     <div class="demo">
29 |       <div class="demo-title">不显示遮罩层</div>
30 |       <div class="demo-item">
31 |         <cc-button @click="show4 = true">打开键盘</cc-button>
32 |         <cc-number-keyboard :showMask='false'  v-model:value="show4"></cc-number-keyboard>
33 |       </div>
34 |     </div>
35 |   </div>
36 | </template>
37 | 
38 | <script setup lang="ts">
39 | import { ref } from "vue"
40 | 
41 | let show1 = ref<boolean>(false)
42 | let show2 = ref<boolean>(false)
43 | let show3 = ref<boolean>(false)
44 | let show4 = ref<boolean>(false)
45 | let value1 = ref<string>('')
46 | 
47 | 
48 | let handleChange = (val: string) => {
49 |   value1.value += val
50 | }
51 | // 退格键被点击
52 | let backspace = () => {
53 |   // 删除value的最后一个字符
54 |   if (value1.value.length) value1.value = value1.value.substr(0, value1.value.length - 1)
55 | }
56 | </script>
57 | 
58 | <style scoped lang="scss">
59 | .demo {
60 |   margin-bottom: #{topx(20)};
61 |   padding: #{topx(10)};
62 |   &-title {
63 |     padding: #{topx(10)};
64 |   }
65 |   &-item {
66 |     padding: 0 5px;
67 |     margin-bottom: 10px;
68 |   }
69 | }
70 | </style>


--------------------------------------------------------------------------------
/src/components/cc-divider/cc-divider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="!slot" class="cc-divider-nocontent" :style="{ width: widthValue }"></div>
 3 |   <div v-else class="cc-divider-content">
 4 |     <div
 5 |       class="cc-divider-content-left-line"
 6 |       :class="{ 'f-1': !width || position === 'left', 'f-8': position === 'right' }"
 7 |       :style="{ width: widthValue, background: color }"
 8 |     ></div>
 9 |     <div>
10 |       <slot></slot>
11 |     </div>
12 |     <div
13 |       class="cc-divider-content-right-line"
14 |       :class="{ 'f-1': !width || position === 'right', 'f-8': position === 'left' }"
15 |       :style="{ width: widthValue, background: color }"
16 |     ></div>
17 |   </div>
18 | </template>
19 | 
20 | <script lang="ts" setup>
21 | import { defineProps, computed, onMounted, ref, PropType, useSlots } from 'vue'
22 | 
23 | type Align = 'center' | 'left' | 'right'
24 | 
25 | let props = defineProps({
26 |   // 分割线宽度
27 |   width: {
28 |     type: [String, Number],
29 |     default: ''
30 |   },
31 |   // 文字位置
32 |   position: {
33 |     type: String as PropType<Align>,
34 |     default: 'center',
35 |   },
36 |   // 边框颜色
37 |   color: {
38 |     type: String,
39 |     default: '#ebedf0'
40 |   }
41 | })
42 | let slots = useSlots()
43 | 
44 | 
45 | let widthValue = computed(() => {
46 |   if (String(props.width).includes('%')) return props.width
47 |   else return (props.width as number) / 2 + 'px'
48 | })
49 | let slot = ref()
50 | onMounted(() => {
51 |   if (slots.default) slot.value = slots.default
52 | })
53 | 
54 | 
55 | 
56 | 
57 | </script>
58 | 
59 | <style scoped lang="scss">
60 | .cc-divider {
61 |   width: 100%;
62 |   &-nocontent {
63 |     height: #{topx(1)};
64 |     background: #ebedf0;
65 |     width: 100%;
66 |   }
67 |   &-content {
68 |     display: flex;
69 |     align-items: center;
70 |     justify-content: center;
71 |     width: 100%;
72 |     &-left-line,
73 |     &-right-line {
74 |       height: #{topx(1)};
75 |     }
76 |     &-left-line {
77 |       margin-right: #{topx(15)};
78 |     }
79 |     &-right-line {
80 |       margin-left: #{topx(15)};
81 |     }
82 |   }
83 | }
84 | .f-1 {
85 |   flex: 1;
86 | }
87 | .f-8 {
88 |   flex: 8;
89 | }
90 | </style>


--------------------------------------------------------------------------------
/src/components/cc-mask/cc-mask.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="cc-mask"
  4 |     :class="{ 'cc-mask-show': show, 'cc-mask-hide': !show }"
  5 |     :style="{ zIndex: Number(zIndex), background: bgColor, top, display, animationDuration: duration + 's' }"
  6 |     @click="handleClick"
  7 |   >
  8 |     <slot></slot>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script setup lang="ts">
 13 | import { defineProps, defineEmits, PropType, ref, watch } from 'vue'
 14 | 
 15 | let props = defineProps({
 16 |   // 是否显示遮罩层
 17 |   show: {
 18 |     type: Boolean,
 19 |     default: false
 20 |   },
 21 |   // 层级
 22 |   zIndex: {
 23 |     type: [Number, String],
 24 |     default: 1
 25 |   },
 26 |   // 背景颜色
 27 |   bgColor: {
 28 |     type: String,
 29 |     default: 'rgba(0, 0, 0, 0.7)'
 30 |   },
 31 |   // 遮罩是否可点击
 32 |   maskClick: {
 33 |     type: Boolean,
 34 |     default: true
 35 |   },
 36 |   // 动画时长
 37 |   duration: {
 38 |     type: [Number, String],
 39 |     default: 0.25
 40 |   }
 41 | })
 42 | 
 43 | let emits = defineEmits(['click', 'update:show'])
 44 | 
 45 | let handleClick = () => {
 46 |   if (props.maskClick) {
 47 |     emits('update:show', !props.show)
 48 |     emits('click')
 49 |   }
 50 | }
 51 | 
 52 | let top = ref<string>('')
 53 | let head = document.getElementsByTagName('uni-page-head')[0]
 54 | if (head) top.value = '88rpx'
 55 | 
 56 | let display = ref('')
 57 | watch(() => props.show, val => {
 58 |   if (val) display.value = 'block'
 59 |   else {
 60 |     setTimeout(() => {
 61 |       display.value = 'none'
 62 |     }, 200)
 63 |   }
 64 | })
 65 | </script>
 66 | 
 67 | <style scoped lang="scss">
 68 | .cc-mask {
 69 |   position: fixed;
 70 |   top: 0;
 71 |   bottom: 0;
 72 |   left: 0;
 73 |   right: 0;
 74 |   opacity: 0;
 75 |   &-show {
 76 |     animation: show 0.25s linear forwards;
 77 |   }
 78 |   &-hide {
 79 |     animation: hide 0.25s linear forwards;
 80 |     &.cc-mask {
 81 |       display: none;
 82 |     }
 83 |   }
 84 | }
 85 | @keyframes show {
 86 |   from {
 87 |     opacity: 0;
 88 |   }
 89 |   to {
 90 |     opacity: 1;
 91 |   }
 92 | }
 93 | @keyframes hide {
 94 |   from {
 95 |     opacity: 1;
 96 |   }
 97 |   to {
 98 |     opacity: 0;
 99 |   }
100 | }
101 | </style>


--------------------------------------------------------------------------------
/src/components/cc-countup/cc-countup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :id="id" class="cc-countup"></div>
  3 | </template>
  4 | 
  5 | <script setup lang="ts">
  6 | import { defineProps, onMounted, getCurrentInstance, computed, ref, nextTick } from 'vue'
  7 | import { CountUp, CountUpOptions } from 'countup.js'
  8 | 
  9 | let instance = getCurrentInstance()
 10 | 
 11 | let props = defineProps({
 12 |   // 是否自动滚动
 13 |   autoplay: {
 14 |     type: Boolean,
 15 |     default: true
 16 |   },
 17 |   // 滚动开始值
 18 |   startVal: {
 19 |     type: Number,
 20 |   },
 21 |   // 滚动结束值
 22 |   endVal: {
 23 |     type: Number,
 24 |   },
 25 |   // 滚动持续时长
 26 |   duration: {
 27 |     type: Number,
 28 |     default: 2
 29 |   },
 30 |   // 使用过渡动画
 31 |   useEasing: {
 32 |     type: Boolean,
 33 |     default: true
 34 |   },
 35 |   // 千分位分隔符
 36 |   useGrouping: {
 37 |     type: Boolean,
 38 |     default: true
 39 |   },
 40 |   // 千分位分割符号
 41 |   separator: {
 42 |     type: String,
 43 |     default: ','
 44 |   },
 45 |   // 小数位数
 46 |   decimalPlaces: {
 47 |     type: Number,
 48 |     default: 0
 49 |   },
 50 |   // 小数位分割符号
 51 |   decimal: {
 52 |     type: String,
 53 |     default: '.'
 54 |   },
 55 |   // 前缀内容
 56 |   prefix: {
 57 |     type: String,
 58 |     default: ''
 59 |   },
 60 |   // 后缀内容
 61 |   suffix: {
 62 |     type: String,
 63 |     default: ''
 64 |   },
 65 |   end: {
 66 |     type: Function
 67 |   }
 68 | })
 69 | 
 70 | let id = computed(() => 'cc-countup ' + instance!.uid)
 71 | let options: CountUpOptions = {
 72 |   startVal: props.startVal!,
 73 |   duration: props.duration,
 74 |   useEasing: props.useEasing,
 75 |   useGrouping: props.useGrouping,
 76 |   separator: props.separator,
 77 |   decimalPlaces: props.decimalPlaces,
 78 |   decimal: props.decimal,
 79 |   prefix: props.prefix,
 80 |   suffix: props.suffix,
 81 |   
 82 | }
 83 | 
 84 | let countup = ref()
 85 | 
 86 | onMounted(() => {
 87 |   countup.value = new CountUp(id.value, props.endVal!, options)
 88 |   if (!countup.value.error) {
 89 |     if (props.autoplay) countup.value.start(props.end)
 90 |   } else {
 91 |     console.error(countup.value.error)
 92 |   }
 93 | })
 94 | 
 95 | defineExpose({
 96 |   countup
 97 | })
 98 | 
 99 | </script>
100 | 
101 | <style scoped lang="scss">
102 | </style>


--------------------------------------------------------------------------------
/src/components/cc-badge/cc-badge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cc-badge">
 3 |     <slot></slot>
 4 |     <div
 5 |       :style="{ background: bgColor, color, top: offset[0] + 'px', right: offset[1] + 'px' }"
 6 |       class="cc-badge-content"
 7 |       v-if="!dot"
 8 |     >
 9 |       <template v-if="content">{{ showContent }}</template>
10 |       <slot name="content" v-else></slot>
11 |     </div>
12 |     <div
13 |       v-else
14 |       class="cc-badge-dot"
15 |       :style="{
16 |         background: bgColor,
17 |         top:offset[0] + 'px',
18 |         right: offset[1] + 'px'
19 |       }"
20 |     ></div>
21 |   </div>
22 | </template>
23 | 
24 | <script setup lang="ts">
25 | import { defineProps, computed, defineComponent } from 'vue'
26 | 
27 | let props = defineProps({
28 |   // 内容
29 |   content: {
30 |     type: [Number, String],
31 |   },
32 |   // 最大值
33 |   max: {
34 |     type: [Number, String],
35 |   },
36 |   // 显示点
37 |   dot: {
38 |     type: Boolean,
39 |     default: false
40 |   },
41 |   // 自定义背景颜色
42 |   bgColor: {
43 |     type: String,
44 |   },
45 |   // 内容颜色
46 |   color: {
47 |     type: String,
48 |   },
49 |   // 偏移量
50 |   offset: {
51 |     type: Array,
52 |     default: []
53 |   }
54 | })
55 | 
56 | let showContent = computed(() => {
57 |   if (props.max && typeof props.content === 'number') {
58 |     if (props.content < props.max) return props.content
59 |     else return props.max + '+'
60 |   } else {
61 |     return props.content
62 |   }
63 | })
64 | </script>
65 | 
66 | <style scoped lang="scss">
67 | .cc-badge {
68 |   position: relative;
69 |   &-content {
70 |     position: absolute;
71 |     top: 0;
72 |     right: 0;
73 |     display: flex;
74 |     align-items: center;
75 |     justify-content: center;
76 |     padding: 0 #{topx(4)};
77 |     border-radius: 100%;
78 |     z-index: 99;
79 |     font-size: 12px;
80 |     background: #ee0a24;
81 |     color: #fff;
82 |     transform: translate(50%, -50%);
83 |     transform-origin: 100%;
84 |   }
85 |   &-dot {
86 |     width: #{topx(8)};
87 |     min-width: 0;
88 |     height: #{topx(8)};
89 |     background-color: #ee0a24;
90 |     border-radius: 100%;
91 |     position: absolute;
92 |     top: #{topx(-4)};
93 |     right: #{topx(-4)};
94 |     transform: translate(0, 0);
95 |   }
96 | }
97 | </style>


--------------------------------------------------------------------------------
/src/views/verifyButton/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-verify-button @start='start' @end='end' @change='change'></cc-verify-button>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="demo">
11 |       <div class="demo-title">自定义文字和时间</div>
12 |       <div class="demo-item">
13 |         <cc-verify-button
14 |           text='发送验证码'
15 |           countDownText='s后重新获取'
16 |           countDown='5'
17 |           endText='再次发送'
18 |         ></cc-verify-button>
19 |       </div>
20 |     </div>
21 | 
22 |     <div class="demo">
23 |       <div class="demo-title">自定义内容</div>
24 |       <div class="demo-item">
25 |         <cc-verify-button @change='handleChange' :customText='text'></cc-verify-button>
26 |       </div>
27 |     </div>
28 | 
29 |     <div class="demo">
30 |       <div class="demo-title">自定义按钮</div>
31 |       <div class="demo-item">
32 |         <cc-verify-button type='primary'></cc-verify-button>
33 |       </div>
34 |       <div class="demo-item">
35 |         <cc-verify-button type='primary' size='mini'></cc-verify-button>
36 |       </div>
37 |       <div class="demo-item">
38 |         <cc-verify-button type='success' plain></cc-verify-button>
39 |       </div>
40 |       <div class="demo-item">
41 |         <cc-verify-button type='warning' round></cc-verify-button>
42 |       </div>
43 |       <div class="demo-item">
44 |         <cc-verify-button type='primary' icon='phone'></cc-verify-button>
45 |       </div>
46 |     </div>
47 | 
48 |   </div>
49 | </template>
50 | 
51 | <script setup lang="ts">
52 | import { ref } from "vue"
53 | 
54 |   let text = ref<string>('')
55 |   let time = ref<number>(0)
56 |   let start = () => {
57 |     console.log('start')
58 |   }
59 |   let end = () => {
60 |     console.log('end')
61 |   }
62 |   let change = (val: number) => {
63 |     console.log('change', val)
64 |   }
65 |   let handleChange = (val: number) => {
66 |     time.value = val
67 |     text.value = `时间的沙漏开始走了${time.value}s`
68 |   }
69 | </script>
70 | 
71 | <style scoped lang='scss'>
72 | .demo {
73 |   margin-bottom: #{topx(20)};
74 |   padding: #{topx(10)};
75 |   &-title {
76 |     padding: #{topx(10)};
77 |   }
78 |   &-item {
79 |     padding: 0 5px;
80 |     margin-bottom: 10px;
81 |   }
82 | }
83 | </style>


--------------------------------------------------------------------------------
/src/views/noticeBar/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demo">
 3 |     <div class="title">基础用法</div>
 4 |     <div class="content">
 5 |       <cc-notice-bar
 6 |         volume 
 7 |         closeable
 8 |         @click="clickBar"
 9 |         @clickLeft="clickLeft"
10 |         @clickRight='clickRight'
11 |         >闭起双眼你最挂念谁,眼睛张开身边竟是谁,感激车站里,尚有月台能让我们满足到落泪</cc-notice-bar>
12 |     </div>
13 |     <div class="content">
14 |       <cc-notice-bar volume link>闭起双眼你最挂念谁,眼睛张开身边竟是谁,感激车站里,尚有月台能让我们满足到落泪</cc-notice-bar>
15 |     </div>
16 |   </div>
17 | 
18 |   <div class="demo">
19 |     <div class="title">滚动速度</div>
20 |     <div class="content">
21 |       <cc-notice-bar text="拥不拥有也会记住谁,快不快乐有天总过去" speed="160" volume link></cc-notice-bar>
22 |     </div>
23 |   </div>
24 | 
25 |   <div class="demo">
26 |     <div class="title">无图标</div>
27 |     <div class="content">
28 |       <cc-notice-bar text="拥不拥有也会记住谁,快不快乐有天总过去" volume></cc-notice-bar>
29 |     </div>
30 |     <div class="content">
31 |       <cc-notice-bar text="拥不拥有也会记住谁,快不快乐有天总过去"></cc-notice-bar>
32 |     </div>
33 |   </div>
34 | 
35 |   <div class="demo">
36 |     <div class="title">自定义内容</div>
37 |     <div class="content">
38 |       <cc-notice-bar text="当你孤单你会想起谁">
39 |         <template #left>
40 |           <cc-icon type='person'></cc-icon>
41 |         </template>
42 |       </cc-notice-bar>
43 |     </div>
44 |     <div class="content">
45 |       <cc-notice-bar bgColor='#ecf9ff'>
46 |         <template #default>
47 |           <div style="color: #1989fa">你想不想找个人来陪</div>
48 |         </template>
49 |       </cc-notice-bar>
50 |     </div>
51 |     <div class="content">
52 |       <cc-notice-bar text="你的快乐伤悲,只有我能体会">
53 |         <template #right>
54 |           <div class="text">体会</div>
55 |         </template>
56 |       </cc-notice-bar>
57 |     </div>
58 |   </div>
59 | </template>
60 | 
61 | <script setup lang='ts'>
62 |  let clickBar = () => {
63 |   console.log('click')
64 |  }
65 |  let clickLeft = () => {
66 |   console.log('clickLeft')
67 |  }
68 |  let clickRight = () => {
69 |   console.log('clickRight')
70 | }
71 | </script>
72 | 
73 | <style lang="scss" scoped>
74 | .demo {
75 |   margin: #{topx(20)} 0;
76 | }
77 | .title {
78 |   margin: #{topx(10)};
79 | }
80 | .content {
81 |   margin: #{topx(10)};
82 |   display: flex;
83 |   align-items: center;
84 |   flex-wrap: wrap;
85 |   div {
86 |     margin: #{topx(5)};
87 |   }
88 | }
89 | .text {
90 |   height: #{topx(40)};
91 |   line-height:  #{topx(40)};
92 | }
93 | </style>


--------------------------------------------------------------------------------
/src/views/avatar/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基本用法</div>
 5 |       <div class="demo-item">
 6 |         <div>
 7 |           <cc-avatar :src="src" size="small"></cc-avatar>
 8 |         </div>
 9 |         <div>
10 |           <cc-avatar :src="src"></cc-avatar>
11 |         </div>
12 |         <div>
13 |           <cc-avatar :src="src" size="large"></cc-avatar>
14 |         </div>
15 |         <div>
16 |           <cc-avatar :src="src" size="80"></cc-avatar>
17 |         </div>
18 |       </div>
19 |     </div>
20 | 
21 |     <div class="demo">
22 |       <div class="demo-title">方形头像</div>
23 |       <div class="demo-item">
24 |         <div>
25 |           <cc-avatar :round="false" :src="src" size="small"></cc-avatar>
26 |         </div>
27 |         <div>
28 |           <cc-avatar :round="false" :src="src"></cc-avatar>
29 |         </div>
30 |         <div>
31 |           <cc-avatar :round="false" :src="src" size="large"></cc-avatar>
32 |         </div>
33 |         <div>
34 |           <cc-avatar :round="false" :src="src" size="80"></cc-avatar>
35 |         </div>
36 |       </div>
37 |     </div>
38 | 
39 |     <div class="demo">
40 |       <div class="demo-title">自定义内容</div>
41 |       <div class="demo-item">
42 |         <div>
43 |           <cc-avatar>
44 |             user
45 |           </cc-avatar>
46 |         </div>
47 |       </div>
48 |     </div>
49 | 
50 |     <div class="demo">
51 |       <div class="demo-title">加载失败</div>
52 |       <div class="demo-item">
53 |         <div>
54 |           <cc-avatar size='50' :src="`${src}1`" @error='handleError'>
55 |             <img width="35" height="35" src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
56 |           </cc-avatar>
57 |         </div>
58 |         <div>
59 |           <cc-avatar size='60' :src="`${src}1`">
60 |             加载失败
61 |           </cc-avatar>
62 |         </div>
63 |       </div>
64 |     </div>
65 |   </div>
66 | </template>
67 | 
68 | <script setup lang="ts">
69 | let src: string = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
70 | 
71 | let handleError = () => {
72 |   console.log('error')
73 | }
74 | </script>
75 | 
76 | <style scoped lang="scss">
77 | .demo {
78 |   margin-bottom: #{topx(20)};
79 |   &-title {
80 |     padding: #{topx(10)};
81 |   }
82 |   &-item {
83 |     display: flex;
84 |     align-items: center;
85 |     margin-left: #{topx(15)};
86 |     div {
87 |       margin-left: #{topx(15)};
88 |     }
89 |   }
90 | }
91 | </style>


--------------------------------------------------------------------------------
/src/views/passwordInput/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="demo">
 4 |       <div class="demo-title">基础用法</div>
 5 |       <div class="demo-item">
 6 |         <cc-button @click="show1 = true">打开键盘</cc-button>
 7 |         <cc-password-input
 8 |           v-model:value="show1"
 9 |           @complete="handleComplete"
10 |           @change="handleChange"
11 |           @backspace="handleBackspace"
12 |         ></cc-password-input>
13 |       </div>
14 |       <div>当前输入值: {{ value1 }}</div>
15 |     </div>
16 | 
17 |     <div class="demo">
18 |       <div class="demo-title">自定义长度</div>
19 |       <div class="demo-item">
20 |         <cc-button @click="show2 = true">打开键盘</cc-button>
21 |         <cc-password-input v-model:value="show2" length="4"></cc-password-input>
22 |       </div>
23 |     </div>
24 | 
25 |     <div class="demo">
26 |       <div class="demo-title">自定义间距</div>
27 |       <div class="demo-item">
28 |         <cc-button @click="show3 = true">打开键盘</cc-button>
29 |         <cc-password-input v-model:value="show3" gutter="0"></cc-password-input>
30 |       </div>
31 |     </div>
32 | 
33 |     <div class="demo">
34 |       <div class="demo-title">明文显示</div>
35 |       <div class="demo-item">
36 |         <cc-button @click="show4 = true">打开键盘</cc-button>
37 |         <cc-password-input v-model:value="show4" :mask="false"></cc-password-input>
38 |       </div>
39 |     </div>
40 | 
41 |     <div class="demo">
42 |       <div class="demo-title">设置初始值</div>
43 |       <div class="demo-item">
44 |         <cc-button @click="show5 = true">打开键盘</cc-button>
45 |         <cc-password-input v-model:value="show5" initValue="1234" :mask='false'></cc-password-input>
46 |       </div>
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <script setup lang="ts">
52 | import { ref } from 'vue'
53 | 
54 | let show1 = ref<boolean>(false)
55 | let show2 = ref<boolean>(false)
56 | let show3 = ref<boolean>(false)
57 | let show4 = ref<boolean>(false)
58 | let show5 = ref<boolean>(false)
59 | let show6 = ref<boolean>(false)
60 | let value1 = ref<string>('')
61 | 
62 | let handleComplete = (val: string) => {
63 |   console.log('complete', val)
64 | }
65 | let handleChange = (val: string) => {
66 |   console.log('change', val)
67 | }
68 | let handleBackspace = (val: string) => {
69 |   console.log('backspace', val)
70 | }
71 | </script>
72 | 
73 | <style scoped lang="scss">
74 | .demo {
75 |   margin-bottom: #{topx(20)};
76 |   padding: #{topx(10)};
77 |   &-title {
78 |     padding: #{topx(10)};
79 |   }
80 |   &-item {
81 |     padding: 0 5px;
82 |     margin-bottom: 10px;
83 |   }
84 | }
85 | </style>


--------------------------------------------------------------------------------
/src/views/cell/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="title">
 4 |       <div class="title">基础语法</div>
 5 |       <div>
 6 |         <cc-cell title="单元格" value="内容"></cc-cell>
 7 |       </div>
 8 |       <div>
 9 |         <cc-cell title="单元格" label="描述信息" value="内容"></cc-cell>
10 |       </div>
11 |       <div>
12 |         <cc-cell icon="person" title="单元格" label="描述信息" value="内容"></cc-cell>
13 |       </div>
14 |     </div>
15 | 
16 |     <div class="title">
17 |       <div class="title">单元格尺寸</div>
18 |       <div>
19 |         <cc-cell size="large" title="单元格" value="内容"></cc-cell>
20 |       </div>
21 |       <div>
22 |         <cc-cell size="large" title="单元格" label="描述信息" value="内容"></cc-cell>
23 |       </div>
24 |     </div>
25 | 
26 |     <div class="title">
27 |       <div class="title">无边框</div>
28 |       <div>
29 |         <cc-cell title="单元格" value="内容" :border="false"></cc-cell>
30 |       </div>
31 |     </div>
32 | 
33 |     <div class="title">
34 |       <div class="title">右侧箭头</div>
35 |       <div>
36 |         <cc-cell title="单元格" isLink></cc-cell>
37 |       </div>
38 |       <div>
39 |         <cc-cell title="单元格" value="内容" isLink></cc-cell>
40 |       </div>
41 |       <div>
42 |         <cc-cell title="单元格" value="内容" isLink arrowDirection="left"></cc-cell>
43 |       </div>
44 |       <div>
45 |         <cc-cell title="单元格" value="内容" isLink arrowDirection="up"></cc-cell>
46 |       </div>
47 |       <div>
48 |         <cc-cell title="单元格" value="内容" isLink arrowDirection="down"></cc-cell>
49 |       </div>
50 |     </div>
51 | 
52 |     <div class="title">
53 |       <div class="title">插槽内容</div>
54 |       <div>
55 |         <cc-cell value="内容">
56 |           <template #title>
57 |             <text class="custom-title">单元格</text>
58 |             <text class="danger">标签</text>
59 |           </template>
60 |         </cc-cell>
61 |       </div>
62 |       <div>
63 |         <cc-cell title="单元格">
64 |           <template #right-icon>
65 |             <cc-icon type='search'></cc-icon>
66 |           </template>
67 |         </cc-cell>
68 |       </div>
69 |     </div>
70 |   </div>
71 | </template>
72 | 
73 | <script lang="ts" setup>
74 | </script>
75 | 
76 | <style lang="scss" scoped>
77 | .title {
78 |   margin: #{topx(10)};
79 | }
80 | .custom-title {
81 |   margin-right: #{topx(2)};
82 |   vertical-align: middle;
83 |   color: #ee0a24;
84 | }
85 | .danger {
86 |   background-color: #ee0a24;
87 |   padding: 0 #{topx(2)};
88 |   color: #fff;
89 |   font-size: 12px;
90 |   line-height: #{topx(32)};
91 |   border-radius: #{topx(1)};
92 | }
93 | .search-icon {
94 |   font-size: 16px;
95 |   line-height: inherit;
96 | }
97 | </style>


--------------------------------------------------------------------------------
/src/views/sidebar/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="demo">
  3 |     <div class="demo-title">基础语法</div>
  4 |     <cc-sidebar :list='list1' @change="clickItem"></cc-sidebar>
  5 |   </div>
  6 |   <div class="demo">
  7 |     <div class="demo-title">不显示左侧线条</div>
  8 |     <cc-sidebar :showLine='false' :list='list1'></cc-sidebar>
  9 |   </div>
 10 |   <div class="demo">
 11 |     <div class="demo-title">禁用选项</div>
 12 |     <cc-sidebar :list='list2'></cc-sidebar>
 13 |   </div>
 14 |   <div class="demo">
 15 |     <div class="demo-title">徽标提示</div>
 16 |     <cc-sidebar :list='list3'></cc-sidebar>
 17 |   </div>
 18 |   <div class="demo">
 19 |     <div class="demo-title">自定义左侧线条显示</div>
 20 |     <cc-sidebar width='120' :list='list4'></cc-sidebar>
 21 |   </div>
 22 |   <div class="demo">
 23 |     <div class="demo-title">自定义样式</div>
 24 |     <cc-sidebar width='120' :list='list5'></cc-sidebar>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script setup lang="ts">
 29 | import { SidebarItem } from "@/components/cc-sidebar/cc-sidebar.vue";
 30 | 
 31 | let list1: SidebarItem[] = [
 32 |   {
 33 |     title: '标签1'
 34 |   },
 35 |   {
 36 |     title: '标签2'
 37 |   },
 38 |   {
 39 |     title: '标签3'
 40 |   },
 41 | ]
 42 | 
 43 | let list2: SidebarItem[] = [
 44 |   {
 45 |     title: '标签1'
 46 |   },
 47 |   {
 48 |     title: '标签2',
 49 |     disabled: true
 50 |   },
 51 |   {
 52 |     title: '标签3'
 53 |   },
 54 | ]
 55 | 
 56 | let list3: SidebarItem[] = [
 57 |   {
 58 |     title: '标签1'
 59 |   },
 60 |   {
 61 |     title: '标签2',
 62 |     dot: true
 63 |   },
 64 |   {
 65 |     title: '标签3',
 66 |     badge: 5
 67 |   },
 68 | ]
 69 | 
 70 | let list4: SidebarItem[] = [
 71 |   {
 72 |     title: '标签1',
 73 |     lineColor: '#765489',
 74 |     lineWidth: 10,
 75 |     lineHeight: 20
 76 |   },
 77 |   {
 78 |     title: '标签2',
 79 |     lineColor: '#765489'
 80 |   },
 81 |   {
 82 |     title: '标签3',
 83 |     lineColor: '#765489'
 84 |   },
 85 |   {
 86 |     title: '标签4',
 87 |     lineColor: '#765489'
 88 |   },
 89 | ]
 90 | 
 91 | let list5: SidebarItem[] = [
 92 |   {
 93 |     title: '标签1',
 94 |     activeColor: 'red',
 95 |   },
 96 |   {
 97 |     title: '标签2',
 98 |     bgColor: '#675232',
 99 |     activeColor: '#fff'
100 |   },
101 |   {
102 |     title: '标签3',
103 |     textColor: '#976512'
104 |   },
105 |   {
106 |     title: '标签4',
107 |     fontSize: 30,
108 |   },
109 | ]
110 | 
111 | let clickItem = ({item, index}: {item: SidebarItem, index: number}) => {
112 |   console.log(item)
113 |   console.log(index)
114 | }
115 | </script>
116 | 
117 | <style lang="scss" scoped>
118 |   .demo {
119 |     margin-bottom: #{topx(10)};
120 |     &-title {
121 |       margin: #{topx(10)};
122 |     }
123 |   }
124 | </style>


--------------------------------------------------------------------------------
/src/views/navBar/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="demo">
  3 |     <cc-nav-bar fixed placeholder leftArrow leftText="倾城" title="普通成熟时" rightText="无条件"></cc-nav-bar>
  4 |     <div>占位之后的内容: 岁月如歌</div>
  5 |     <div class="item1">
  6 |       <cc-nav-bar
  7 |         @clickTitle="click"
  8 |         @clickRight="right"
  9 |         @clickLeft="left"
 10 |         leftText="单车"
 11 |         title="富士山下"
 12 |         rightText="人来人往"
 13 |       ></cc-nav-bar>
 14 |     </div>
 15 |     <div class="item2">
 16 |       <cc-nav-bar leftArrow leftText="十年" title="不要说话" rightText="浮夸"></cc-nav-bar>
 17 |     </div>
 18 |     <div class="item3">
 19 |       <cc-nav-bar
 20 |         leftArrow
 21 |         leftIcon="search"
 22 |         leftIconColor="#acf967"
 23 |         leftTextColor="#1989fa"
 24 |         titleColor="red"
 25 |         leftText="K歌之王"
 26 |         rightColor="#976622"
 27 |         title="苦瓜"
 28 |         rightText="你的背包"
 29 |       ></cc-nav-bar>
 30 |     </div>
 31 |     <div class="item4">
 32 |       <cc-nav-bar background="#1989fa" leftArrow leftText="十年" title="不要说话" rightText="浮夸"></cc-nav-bar>
 33 |     </div>
 34 |     <div class="item5">
 35 |       <cc-nav-bar title="陈奕迅林夕黄伟文陪你度过漫长岁月"></cc-nav-bar>
 36 |     </div>
 37 |     <div class="item6">
 38 |       <cc-nav-bar>
 39 |         <template #left>
 40 |           <cc-tag>内疚</cc-tag>
 41 |         </template>
 42 |         <template #default>
 43 |           <div class="demo-rate"><cc-rate v-model:value="value"></cc-rate></div>
 44 |         </template>
 45 |         <template #right>
 46 |           <cc-tag type='success'>陀飞轮</cc-tag>
 47 |         </template>
 48 |       </cc-nav-bar>
 49 |     </div>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script setup lang="ts">
 54 | let value = 3
 55 | let click = () => {
 56 |   console.log('click')
 57 | }
 58 | let right = () => {
 59 |   console.log('right')
 60 | }
 61 | let left = () => {
 62 |   console.log('left')
 63 | }
 64 | </script>
 65 | 
 66 | <style scoped lang="scss">
 67 | .demo {
 68 |   background: #f7f8fa;
 69 |   height: 100vh;
 70 |   position: relative;
 71 |   &-rate {
 72 |     display: flex;
 73 |     justify-content: center;
 74 |   }
 75 |   .item1 {
 76 |     position: absolute;
 77 |     top: 100px;
 78 |     width: 100%;
 79 |   }
 80 |   .item2 {
 81 |     position: absolute;
 82 |     top: 200px;
 83 |     width: 100%;
 84 |   }
 85 |   .item3 {
 86 |     position: absolute;
 87 |     top: 300px;
 88 |     width: 100%;
 89 |   }
 90 |   .item4 {
 91 |     position: absolute;
 92 |     top: 400px;
 93 |     width: 100%;
 94 |   }
 95 |   .item5 {
 96 |     position: absolute;
 97 |     top: 500px;
 98 |     width: 100%;
 99 |   }
100 |   .item6 {
101 |     position: absolute;
102 |     top: 600px;
103 |     width: 100%;
104 |   }
105 | }
106 | </style>


--------------------------------------------------------------------------------
/src/components/cc-skeleton/cc-skeleton.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-skeleton" v-if="loading">
  3 |     <div
  4 |       v-if="avatar"
  5 |       class="cc-skeleton-avatar"
  6 |       :class="{ 'cc-skeleton-avatar-round': round, 'cc-skeleton-animate': animate }"
  7 |       :style="{ width: avatarSize + 'px', height: avatarSize + 'px', background: bgColor }"
  8 |     ></div>
  9 |     <div class="cc-skeleton-wrap" :class="{ 'cc-skeleton-wrap-hasavatar': avatar }">
 10 |       <div
 11 |         v-if="title"
 12 |         class="cc-skeleton-content cc-skeleton-title"
 13 |         :class="{ 'cc-skeleton-animate': animate }"
 14 |         :style="{ background: bgColor }"
 15 |       ></div>
 16 |       <template v-if="row > 0">
 17 |         <div
 18 |           v-for="item in row"
 19 |           :key="item"
 20 |           class="cc-skeleton-content cc-skeleton-row"
 21 |           :class="{ 'cc-skeleton-row-last': item === row, 'cc-skeleton-animate': animate }"
 22 |           :style="{background: bgColor}"
 23 |         ></div>
 24 |       </template>
 25 |     </div>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script setup lang="ts">
 30 | import { defineProps } from 'vue'
 31 | 
 32 | let props = defineProps({
 33 |   // 段落占位图行数
 34 |   row: {
 35 |     type: Number,
 36 |     default: 0,
 37 |   },
 38 |   // 是否开启动画
 39 |   animate: {
 40 |     type: Boolean,
 41 |     default: false
 42 |   },
 43 |   // 是否显示标题占位图
 44 |   title: {
 45 |     type: Boolean,
 46 |     default: false
 47 |   },
 48 |   // 是否显示头像占位图
 49 |   avatar: {
 50 |     type: Boolean,
 51 |     default: false
 52 |   },
 53 |   // 是否显示骨架屏，传 false 时会展示子组件内容
 54 |   loading: {
 55 |     type: Boolean,
 56 |     default: true
 57 |   },
 58 |   // 头像占位图大小
 59 |   avatarSize: {
 60 |     type: [Number, String],
 61 |     default: 32,
 62 |   },
 63 |   // 头像是否圆形
 64 |   round: {
 65 |     type: Boolean,
 66 |     default: true
 67 |   },
 68 |   // 骨架组件背景颜色
 69 |   bgColor: {
 70 |     type: String,
 71 |     default: '#f2f3f5'
 72 |   }
 73 | })
 74 | </script>
 75 | 
 76 | <style scoped lang="scss">
 77 | .cc-skeleton {
 78 |   width: 100%;
 79 |   display: flex;
 80 |   &-animate {
 81 |     animation: skeleton-animate 1.2s ease-in-out infinite;
 82 |   }
 83 |   &-title {
 84 |     width: 40%;
 85 |   }
 86 |   &-wrap {
 87 |     flex: 1;
 88 |     &-hasavatar {
 89 |       padding-top: #{topx(8)};
 90 |     }
 91 |   }
 92 |   &-content {
 93 |     height: 16px;
 94 |   }
 95 |   &-avatar {
 96 |     margin-right: #{topx(16)};
 97 |     &-round {
 98 |       border-radius: 100%;
 99 |     }
100 |   }
101 |   &-row {
102 |     width: 100%;
103 |     margin-top: #{topx(20)};
104 |     &-last {
105 |       width: 60%;
106 |     }
107 |   }
108 | }
109 | @keyframes skeleton-animate {
110 |   from {
111 |     opacity: 1;
112 |   }
113 |   to {
114 |     opacity: 0.6;
115 |   }
116 | }
117 | </style>


--------------------------------------------------------------------------------
/src/views/notify/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <cc-notify ref="notify"></cc-notify>
 4 |     <div>
 5 |       <div class="title">基础语法</div>
 6 |       <div class="item">
 7 |         <div>
 8 |           <cc-button @click="open({title: '最佳损友'})">primary</cc-button>
 9 |         </div>
10 |         <div>
11 |           <cc-button type="success" @click="open({ title: '红玫瑰', type: 'success' })">success</cc-button>
12 |         </div>
13 |         <div>
14 |           <cc-button type="warning" @click="open({ title: '白玫瑰', type: 'warning' })">warning</cc-button>
15 |         </div>
16 |         <div>
17 |           <cc-button type="error" @click="open({ title: '人来人往', type: 'error' })">error</cc-button>
18 |         </div>
19 |         <div>
20 |           <cc-button type="info" @click="open({ title: '一丝不挂', type: 'info' })">info</cc-button>
21 |         </div>
22 |       </div>
23 |     </div>
24 | 
25 |     <div>
26 |       <div class="title">显示时间</div>
27 |       <div class="item">
28 |         <div>
29 |           <cc-button @click="open({ title: '内疚' })">默认2000</cc-button>
30 |         </div>
31 |         <div>
32 |           <cc-button
33 |             type="success"
34 |             @click="open({ title: 'last order', type: 'success', duration: 5000 })"
35 |           >5000</cc-button>
36 |         </div>
37 |         <div>
38 |           <cc-button
39 |             type="warning"
40 |             @click="open({ title: '阿牛', type: 'warning', duration: 300 })"
41 |           >300</cc-button>
42 |         </div>
43 |       </div>
44 |     </div>
45 | 
46 |     <div>
47 |       <div class="title">自定义颜色</div>
48 |       <div class="item">
49 |         <div>
50 |           <cc-button @click="open({ title: '富士山下', color: '#ad0000', background: '#ffe1e1', })">自定义颜色</cc-button>
51 |         </div>
52 |       </div>
53 |     </div>
54 | 
55 |     <div>
56 |       <div class="title">显示圆角</div>
57 |       <div class="item">
58 |         <div>
59 |           <cc-button @click="open({ title: 'k歌之王', showRadius: true })">显示圆角</cc-button>
60 |         </div>
61 |       </div>
62 |     </div>
63 |   </div>
64 | </template>
65 | 
66 | <script lang="ts" setup>
67 | import { NotifyOptions } from '@/components/cc-notify/cc-notify.vue'
68 | import { ref } from 'vue'
69 | 
70 | let notify = ref()
71 | let open = (options: NotifyOptions) => {
72 |   notify.value.show({
73 |     // 标题
74 |     title: options.title,
75 |     // 类型
76 |     type: options.type || 'primary',
77 |     // 持续时间
78 |     duration: options.duration || 2000,
79 |     // 自定义背景颜色和文字颜色
80 |     background: options.background,
81 |     color: options.color,
82 |     showRadius: options.showRadius
83 |   })
84 | }
85 | </script>
86 | 
87 | <style scoped lang='scss'>
88 | .title {
89 |   margin: #{topx(10)};
90 | }
91 | .item {
92 |   display: flex;
93 |   flex-wrap: wrap;
94 |   align-items: center;
95 |   div {
96 |     margin: #{topx(5)};
97 |   }
98 | }
99 | </style>


--------------------------------------------------------------------------------
/src/components/cc-contact-card/cc-contact-card.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-contact-card" @click="handleClick">
  3 |     <div class="cc-contact-card-icon" v-if="type === 'add'">
  4 |       <cc-icon type="plusempty" color="#fff" size="24"></cc-icon>
  5 |     </div>
  6 |     <div v-else>
  7 |       <cc-icon type="person" size="18" style="margin-right: 15px;"></cc-icon>
  8 |     </div>
  9 |     <div class="cc-contact-card-content">
 10 |       <div v-if="type === 'add'">{{ addText }}</div>
 11 |       <div v-else style="color: #323233;">
 12 |         <div>姓名: {{ name }}</div>
 13 |         <div>电话: {{ tel }}</div>
 14 |       </div>
 15 |     </div>
 16 |     <div class="cc-contact-card-arrow" v-if="editable">
 17 |       <cc-icon type="arrowright" color="#969799"></cc-icon>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script setup lang="ts">
 23 | import { defineProps, defineEmits, PropType } from 'vue'
 24 | 
 25 | let props = defineProps({
 26 |   // 类型
 27 |   type: {
 28 |     type: String as PropType<'add' | 'edit'>,
 29 |     default: 'edit'
 30 |   },
 31 |   // 联系人姓名
 32 |   name: {
 33 |     type: String,
 34 |     default: ''
 35 |   },
 36 |   // 联系人手机号
 37 |   tel: {
 38 |     type: String,
 39 |     default: ''
 40 |   },
 41 |   // 添加时的文案提示
 42 |   addText: {
 43 |     type: String,
 44 |     default: '添加联系人'
 45 |   },
 46 |   // 是否可编辑
 47 |   editable: {
 48 |     type: Boolean,
 49 |     default: true
 50 |   }
 51 | })
 52 | let emits = defineEmits(['click'])
 53 | 
 54 | let handleClick = () => {
 55 |   if (!props.editable) return
 56 |   emits('click')
 57 | }
 58 | </script>
 59 | 
 60 | <style scoped lang="scss">
 61 | .cc-contact-card {
 62 |   display: flex;
 63 |   align-items: center;
 64 |   padding: 24px;
 65 |   position: relative;
 66 |   background: #fff;
 67 |   &::before {
 68 |     position: absolute;
 69 |     right: 0;
 70 |     bottom: 0;
 71 |     left: 0;
 72 |     height: 2px;
 73 |     background: -webkit-repeating-linear-gradient(
 74 |       135deg,
 75 |       #ff6c6c 0,
 76 |       #ff6c6c 20%,
 77 |       transparent 0,
 78 |       transparent 25%,
 79 |       #1989fa 0,
 80 |       #1989fa 45%,
 81 |       transparent 0,
 82 |       transparent 50%
 83 |     );
 84 |     background: repeating-linear-gradient(
 85 |       -45deg,
 86 |       #ff6c6c 0,
 87 |       #ff6c6c 20%,
 88 |       transparent 0,
 89 |       transparent 25%,
 90 |       #1989fa 0,
 91 |       #1989fa 45%,
 92 |       transparent 0,
 93 |       transparent 50%
 94 |     );
 95 |     background-size: 80px;
 96 |     content: "";
 97 |   }
 98 |   &-icon {
 99 |     width: 30px;
100 |     height: 30px;
101 |     display: flex;
102 |     align-items: center;
103 |     justify-content: center;
104 |     background: #1989fa;
105 |     border-radius: 5px;
106 |     margin-right: 15px;
107 |   }
108 |   &-content {
109 |     flex: 1;
110 |     font-size: 14px;
111 |     color: #323233;
112 |   }
113 | }
114 | </style>


--------------------------------------------------------------------------------
/src/views/goodsAction/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="demo">
  3 |     <div class="demo-content">
  4 |       <div class="demo-title">基础用法</div>
  5 |       <div class="demo-item">
  6 |         <cc-goods-action :options="options1" :buttons="buttons1"></cc-goods-action>
  7 |       </div>
  8 |     </div>
  9 | 
 10 |     <div class="demo-content">
 11 |       <div class="demo-title">徽标</div>
 12 |       <div class="demo-item">
 13 |         <cc-goods-action :options="options2" :buttons="buttons2"></cc-goods-action>
 14 |       </div>
 15 |     </div>
 16 | 
 17 |     <div class="demo-content">
 18 |       <div class="demo-title">自定义颜色</div>
 19 |       <div class="demo-item">
 20 |         <cc-goods-action :options="options3" :buttons="buttons3"></cc-goods-action>
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <div class="demo-content">
 25 |       <div class="demo-title">自定义按钮颜色</div>
 26 |       <div class="demo-item">
 27 |         <cc-goods-action :options="options4" :buttons="buttons4"></cc-goods-action>
 28 |       </div>
 29 |     </div>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script setup lang="ts">
 34 | let options1 = [
 35 |   {
 36 |     text: '客服',
 37 |     icon: 'chat'
 38 |   },
 39 |   {
 40 |     text: '收藏',
 41 |     icon: 'heart'
 42 |   },
 43 |   {
 44 |     text: '购物车',
 45 |     icon: 'cart'
 46 |   }
 47 | ]
 48 | let buttons1 = [
 49 |   {
 50 |     text: '加入购物车'
 51 |   }
 52 | ]
 53 | let options2 = [
 54 |   {
 55 |     text: '客服',
 56 |     icon: 'chat',
 57 |     dot: true
 58 |   },
 59 |   {
 60 |     text: '收藏',
 61 |     icon: 'heart'
 62 |   },
 63 |   {
 64 |     text: '购物车',
 65 |     icon: 'cart',
 66 |     info: '10'
 67 |   }
 68 | ]
 69 | let buttons2 = [
 70 |   {
 71 |     text: '加入购物车'
 72 |   },
 73 |   {
 74 |     text: '立即购买'
 75 |   }
 76 | ]
 77 | let options3 = [
 78 |   {
 79 |     text: '客服',
 80 |     icon: 'chat',
 81 |     iconColor: 'orange'
 82 |   },
 83 |   {
 84 |     text: '购物车',
 85 |     icon: 'cart',
 86 |     info: '3',
 87 |     iconColor: '#258369',
 88 |     infoColor: '#abc123'
 89 |   }
 90 | ]
 91 | let buttons3 = [
 92 |   {
 93 |     text: '加入购物车'
 94 |   },
 95 |   {
 96 |     text: '立即购买'
 97 |   }
 98 | ]
 99 | let options4 = [
100 |   {
101 |     text: '客服',
102 |     icon: 'chat'
103 |   },
104 |   {
105 |     text: '收藏',
106 |     icon: 'heart'
107 |   },
108 |   {
109 |     text: '购物车',
110 |     icon: 'cart'
111 |   }
112 | ]
113 | let buttons4 = [
114 |   {
115 |     text: '加入购物车',
116 |     background: 'rgb(190, 153, 255)'
117 |   },
118 |   {
119 |     text: '立即购买',
120 |     background: 'rgb(114, 50, 221)'
121 |   }
122 | ]
123 | </script>
124 | 
125 | <style scoped lang="scss">
126 | .demo {
127 |   background: #f7f7f7;
128 |   height: 100vh;
129 |   .demo-content {
130 |     margin-bottom: 20px;
131 |     padding: 10px;
132 |   }
133 |   &-title {
134 |     padding: 10px;
135 |   }
136 |   &-item {
137 |     padding: 0 5px;
138 |     margin-bottom: 10px;
139 |     background: #fff;
140 |   }
141 | }
142 | </style>


--------------------------------------------------------------------------------
/src/components/cc-open-more/cc-open-more.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-open-more">
  3 |     <div class="cc-open-more-content" :style="{ textIndent: textIndent, height: height }">
  4 |       <slot></slot>
  5 |     </div>
  6 |     <div class="cc-open-more-btn" @click="toggle">
  7 |       <div v-if="!flag" :style="{ color: color }">{{ closeText }}</div>
  8 |       <div v-if="flag && showToggle" :style="{ color: color }">{{ openText }}</div>
  9 |       <div class="cc-open-more-btn-icon">
 10 |         <cc-icon :type="icon" :color="color" size="12"></cc-icon>
 11 |       </div>
 12 |     </div>
 13 |     <div class="cc-open-more-mask" v-if="mask"></div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script setup lang="ts">
 18 | import { defineProps, defineEmits, ref } from 'vue'
 19 | 
 20 | let props = defineProps({
 21 |   // 文字首行缩进
 22 |   textIndent: {
 23 |     type: String,
 24 |     default: '2em'
 25 |   },
 26 |   // 内容超出此高度才会显示展开全文按钮
 27 |   openHeight: {
 28 |     type: [String, Number],
 29 |     default: 200
 30 |   },
 31 |   // 文字颜色
 32 |   color: {
 33 |     type: String,
 34 |     default: '#2979ff'
 35 |   },
 36 |   // 关闭时的提示文字
 37 |   closeText: {
 38 |     type: String,
 39 |     default: '展开更多'
 40 |   },
 41 |   // 展开时的提示文字
 42 |   openText: {
 43 |     type: String,
 44 |     default: '收起'
 45 |   },
 46 |   // 展开后是否显示收起按钮
 47 |   showToggle: {
 48 |     type: Boolean,
 49 |     default: true
 50 |   },
 51 |   // 显示遮罩层
 52 |   showMask: {
 53 |     type: Boolean,
 54 |     default: true
 55 |   }
 56 | })
 57 | 
 58 | let emits = defineEmits(['open', 'close'])
 59 | 
 60 | let height = ref<string>(props.openHeight + 'px')
 61 | let mask = ref<boolean>(props.showMask)
 62 | let icon = ref<string>('arrowdown')
 63 | let flag = ref<boolean>(false)
 64 | 
 65 | 
 66 | let toggle = () => {
 67 |   flag.value = !flag.value
 68 |   mask.value = !mask.value
 69 |   height.value = height.value !== 'auto' ? 'auto' : props.openHeight + 'px'
 70 |   icon.value = icon.value === 'arrowdown' ? 'arrowup' : 'arrowdown'
 71 |   if (flag.value) emits('open')
 72 |   else emits('close')
 73 | }
 74 | </script>
 75 | 
 76 | <style scoped lang="scss">
 77 | .cc-open-more {
 78 |   position: relative;
 79 |   &-content {
 80 |     font-size: 12px;
 81 |     overflow: hidden;
 82 |     background-image: linear-gradient(
 83 |       -180deg,
 84 |       rgba(255, 255, 255, 0) 0%,
 85 |       rgb(255, 255, 255) 80%
 86 |     );
 87 |     padding-top: 54px;
 88 |     margin-top: -54px;
 89 |   }
 90 |   &-btn {
 91 |     display: flex;
 92 |     align-items: center;
 93 |     justify-content: center;
 94 |     font-size: 12px;
 95 |     margin-top: 10px;
 96 |     &-icon {
 97 |       margin-left: 3px;
 98 |     }
 99 |   }
100 |   &-mask {
101 |     position: absolute;
102 |     background-image: linear-gradient(
103 |       -180deg,
104 |       rgba(255, 255, 255, 0) 0%,
105 |       rgb(255, 255, 255) 80%
106 |     );
107 |     width: 100%;
108 |     height: 50px;
109 |     bottom: 16px;
110 |   }
111 | }
112 | </style>


--------------------------------------------------------------------------------
/src/components/cc-rate/cc-rate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-rate">
  3 |     <div
  4 |       v-for="item in activeConut"
  5 |       :key="item"
  6 |       :style="{ marginRight: gutter + 'px' }"
  7 |       class="cc-rate-active"
  8 |       @click="clickActive(item)"
  9 |     >
 10 |       <cc-icon :class="{ disabled }" :type="activeIcon" :color="disabled ? '#c8c9cc' : activeColor"></cc-icon>
 11 |     </div>
 12 |     <div
 13 |       v-for="item in (count - activeConut)"
 14 |       :key="item"
 15 |       :style="{ marginRight: gutter + 'px' }"
 16 |       class="cc-rate-inactive"
 17 |       @click="clickInActive(item)"
 18 |     >
 19 |       <cc-icon :type="inactiveIcon" :color="disabled ? '#c8c9cc' : inactiveColor"></cc-icon>
 20 |     </div>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script setup lang="ts">
 25 | import { defineProps, defineEmits, ref, watch } from 'vue'
 26 | let props = defineProps({
 27 |   // 当前分值
 28 |   value: {
 29 |     type: Number,
 30 |     required: true
 31 |   },
 32 |   // 图标总数
 33 |   count: {
 34 |     type: Number,
 35 |     default: 5
 36 |   },
 37 |   // 选中时的图标名称
 38 |   activeIcon: {
 39 |     type: String,
 40 |     default: 'star-filled'
 41 |   },
 42 |   // 选中时的图标名称
 43 |   inactiveIcon: {
 44 |     type: String,
 45 |     default: 'star'
 46 |   },
 47 |   // 选中时的颜色
 48 |   activeColor: {
 49 |     type: String,
 50 |     default: '#ffd21e'
 51 |   },
 52 |   // 未选中的颜色
 53 |   inactiveColor: {
 54 |     type: String,
 55 |     default: '#c8c9cc'
 56 |   },
 57 |   // 星星之间的距离
 58 |   gutter: {
 59 |     type: [String, Number],
 60 |     default: '4'
 61 |   },
 62 |   // 禁用状态
 63 |   disabled: {
 64 |     type: Boolean,
 65 |     default: false
 66 |   },
 67 |   // 只读状态
 68 |   readonly: {
 69 |     type: Boolean,
 70 |     default: false
 71 |   },
 72 |   allowHalf: {
 73 |     type: Boolean,
 74 |     default: false
 75 |   },
 76 |   minCount: {
 77 |     type: Number,
 78 |     default: 0
 79 |   }
 80 | })
 81 | let emits = defineEmits(['change'])
 82 | 
 83 | 
 84 | let activeConut = ref<number>(props.value)
 85 | 
 86 |   if (props.minCount && props.value <= props.minCount) activeConut.value = props.minCount
 87 | 
 88 | let clickActive = (item: number) => {
 89 |   if (props.disabled || props.readonly) return
 90 |   if (activeConut.value === 1) {
 91 |     if (activeConut.value == 1) {
 92 |       activeConut.value = 0
 93 |     } else {
 94 |       activeConut.value = 1
 95 |     }
 96 |   } else {
 97 |     activeConut.value = item
 98 |   }
 99 |   if (props.minCount && activeConut.value < props.minCount) activeConut.value = props.minCount
100 | }
101 | let clickInActive = (item: number) => {
102 |   if (props.disabled || props.readonly) return
103 |   activeConut.value += item
104 |   if (activeConut.value === props.count) activeConut.value = props.count
105 | }
106 | 
107 | watch(() => activeConut.value, val => {
108 |   emits('change', val)
109 | })
110 | 
111 | </script>
112 | 
113 | <style scoped lang="scss">
114 | .cc-rate {
115 |   display: flex;
116 |   align-items: center;
117 | }
118 | </style>


--------------------------------------------------------------------------------
/src/views/stepper/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="demo">
  4 |       <div class="demo-title">基础用法</div>
  5 |       <div class="demo-item">
  6 |         <cc-stepper @minus="minus" @plus="plus" v-model:value="value"></cc-stepper>
  7 |       </div>
  8 |       <div>当前值: {{ value }}</div>
  9 |     </div>
 10 | 
 11 |     <div class="demo">
 12 |       <div class="demo-title">设置步长</div>
 13 |       <div class="demo-item">
 14 |         <cc-stepper step="5" v-model:value="value"></cc-stepper>
 15 |       </div>
 16 |       <div>当前值: {{ value }}</div>
 17 |     </div>
 18 | 
 19 |     <div class="demo">
 20 |       <div class="demo-title">最小值和最大值</div>
 21 |       <div class="demo-item">
 22 |         <cc-stepper min='5' max='15' v-model:value="value1"></cc-stepper>
 23 |       </div>
 24 |       <div>当前值: {{ value1 }}</div>
 25 |     </div>
 26 | 
 27 |     <div class="demo">
 28 |       <div class="demo-title">禁用状态</div>
 29 |       <div class="demo-item">
 30 |         <cc-stepper disabled v-model:value="value"></cc-stepper>
 31 |       </div>
 32 |       <div>当前值: {{ value }}</div>
 33 |     </div>
 34 | 
 35 |     <div class="demo">
 36 |       <div class="demo-title">禁用输入框</div>
 37 |       <div class="demo-item">
 38 |         <cc-stepper disable-input v-model:value="value"></cc-stepper>
 39 |       </div>
 40 |       <div>当前值: {{ value }}</div>
 41 |     </div>
 42 | 
 43 |     <div class="demo">
 44 |       <div class="demo-title">限制输入整数</div>
 45 |       <div class="demo-item">
 46 |         <cc-stepper integer v-model:value="value"></cc-stepper>
 47 |       </div>
 48 |       <div>当前值: {{ value }}</div>
 49 |     </div>
 50 | 
 51 |     <div class="demo">
 52 |       <div class="demo-title">限制小数位位数</div>
 53 |       <div class="demo-item">
 54 |         <cc-stepper decimalLength='3' v-model:value="value"></cc-stepper>
 55 |       </div>
 56 |       <div>当前值: {{ value }}</div>
 57 |     </div>
 58 | 
 59 |     <div class="demo">
 60 |       <div class="demo-title">自定义大小</div>
 61 |       <div class="demo-item">
 62 |         <cc-stepper input-width="40" button-size="32" v-model:value="value"></cc-stepper>
 63 |       </div>
 64 |       <div>当前值: {{ value }}</div>
 65 |     </div>
 66 | 
 67 |     <div class="demo">
 68 |       <div class="demo-title">圆角按钮</div>
 69 |       <div class="demo-item">
 70 |         <cc-stepper disable-input round v-model:value="value"></cc-stepper>
 71 |       </div>
 72 |       <div>当前值: {{ value }}</div>
 73 |     </div>
 74 |   </div>
 75 | </template>
 76 | 
 77 | <script setup lang="ts">
 78 | import { ref } from 'vue'
 79 | 
 80 | let value = ref<number>(1)
 81 | let value1 = ref<number>(8)
 82 | 
 83 | 
 84 | let minus = () => {
 85 |   console.log('minus')
 86 | }
 87 | let plus = () => {
 88 |   console.log('plus')
 89 | }
 90 | </script>
 91 | 
 92 | <style scoped lang="scss">
 93 | .demo {
 94 |   margin-bottom: #{topx(20)};
 95 |   padding: #{topx(10)};
 96 |   &-title {
 97 |     padding: #{topx(10)};
 98 |   }
 99 |   &-item {
100 |     padding: 0 5px;
101 |     margin-bottom: 10px;
102 |   }
103 | }
104 | </style>


--------------------------------------------------------------------------------
/src/components/cc-notify/cc-notify.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="cc-notify"
  4 |     :class="{ 'cc-notify-show': showNotify, 'cc-notify-hide': !showNotify, 'cc-notify-radius': radius }"
  5 |     :style="{ background: bgColor, top }"
  6 |   >
  7 |     <div class="cc-notify-content" :style="{ color: textColor }">{{ text }}</div>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script setup lang='ts'>
 12 | import { defineExpose, onUnmounted, ref } from 'vue'
 13 | 
 14 | export interface NotifyOptions {
 15 |   title: string,
 16 |   type?: 'primary' | 'success' | 'error' | 'warning' | 'info',
 17 |   duration?: number,
 18 |   color?: string,
 19 |   background?: string,
 20 |   showRadius?: boolean
 21 | }
 22 | 
 23 | let showNotify = ref<boolean>(false)
 24 | // 通知内容
 25 | let text = ref<string>('')
 26 | // 背景颜色
 27 | let bgColor = ref<string>('')
 28 | let textColor = ref<string>('')
 29 | let timer = ref()
 30 | // 是否显示圆角
 31 | let radius = ref<boolean>(false)
 32 | 
 33 | let show = (options: NotifyOptions) => {
 34 |   showNotify.value = true
 35 |   let { title, type = 'primary', duration = 2000, color = '', background = '', showRadius } = options
 36 |   text.value = title
 37 |   radius.value = showRadius!
 38 |   if (color) textColor.value = color
 39 |   else textColor.value = '#fff'
 40 |   if (background) {
 41 |     bgColor.value = background
 42 |   } else {
 43 |     if (type === 'primary') {
 44 |       bgColor.value = '#0081ff'
 45 |     }
 46 |     if (type === 'success') {
 47 |       bgColor.value = '#39b54a'
 48 |     }
 49 |     if (type === 'error') {
 50 |       bgColor.value = '#e54d42'
 51 |     }
 52 |     if (type === 'warning') {
 53 |       bgColor.value = '#f37b1d'
 54 |     }
 55 |     if (type === 'info') {
 56 |       bgColor.value = '#909399'
 57 |     }
 58 |   }
 59 |   timer.value = setTimeout(() => {
 60 |     showNotify.value = false
 61 |   }, duration)
 62 | }
 63 | onUnmounted(() => {
 64 |   timer.value = null
 65 |   clearTimeout(timer.value)
 66 | })
 67 | let top = ref<string>('')
 68 | let head = document.getElementsByTagName('uni-page-head')[0]
 69 | if (head) top.value = '88rpx'
 70 | 
 71 | defineExpose({
 72 |   show
 73 | })
 74 | </script>
 75 | 
 76 | <style scoped lang='scss'>
 77 | .cc-notify {
 78 |   display: flex;
 79 |   align-items: center;
 80 |   justify-content: center;
 81 |   padding: #{topx(8)} 0;
 82 |   position: fixed;
 83 |   left: 0;
 84 |   right: 0;
 85 |   top: 0;
 86 |   transform: translateY(-100%);
 87 |   z-index: 999;
 88 |   &-content {
 89 |     font-size: 14px;
 90 |   }
 91 |   &-radius {
 92 |     border-radius: #{topx(10)} #{topx(10)} 0 0;
 93 |   }
 94 | }
 95 | .cc-notify-show {
 96 |   animation: show 0.35s linear forwards;
 97 | }
 98 | .cc-notify-hide {
 99 |   animation: hide 0.35s linear;
100 | }
101 | @keyframes show {
102 |   from {
103 |     transform: translateY(-100%);
104 |   }
105 |   to {
106 |     transform: translateY(0);
107 |   }
108 | }
109 | @keyframes hide {
110 |   from {
111 |     transform: translateY(0);
112 |   }
113 |   to {
114 |     transform: translateY(-100%);
115 |   }
116 | }
117 | </style>


--------------------------------------------------------------------------------
/src/components/cc-pull-refresh/cc-pull-refresh.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="cc-pull-refresh"
  4 |     :style="{ height: `calc(100vh - ${headHeight}px)` }"
  5 |     @touchstart="touchstart"
  6 |     @touchmove="touchmove"
  7 |     @touchend="touchend"
  8 |   >
  9 |     <div
 10 |       class="cc-pull-refresh-wrap"
 11 |       :style="{ transitionDuration: duration + 's', transform: `translateY(${moveY}px)` }"
 12 |     >
 13 |       <div class="cc-pull-refresh-wrap-head" :style="{ height: headHeight + 'px' }">
 14 |         <div v-if="end">{{ tips }}</div>
 15 |         <template v-else>
 16 |           <div v-if="moveY <= 60">{{ pullingText }}</div>
 17 |           <div v-if="moveY > 60">{{ loosingText }}</div>
 18 |         </template>
 19 |       </div>
 20 |       <slot></slot>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script setup lang="ts">
 26 | import { defineProps, defineEmits, ref } from 'vue'
 27 | 
 28 | let props = defineProps({
 29 |   // 顶部内容高度
 30 |   headHeight: {
 31 |     type: [Number, String],
 32 |     default: 50
 33 |   },
 34 |   // 下拉过程提示文案	
 35 |   pullingText: {
 36 |     type: String,
 37 |     default: '下拉即可刷新...'
 38 |   },
 39 |   // 释放过程提示文案
 40 |   loosingText: {
 41 |     type: String,
 42 |     default: '释放即可刷新...'
 43 |   },
 44 |   // 加载过程提示文案	
 45 |   loadingText: {
 46 |     type: String,
 47 |     default: '加载中...'
 48 |   },
 49 |   // 刷新成功提示文案	
 50 |   successText: {
 51 |     type: String,
 52 |     default: ''
 53 |   }
 54 | })
 55 | 
 56 | let emits = defineEmits(['refresh'])
 57 | 
 58 | let duration = ref<number>(0.3)
 59 | let startY = ref<number>(0)
 60 | let moveY = ref<number>(0)
 61 | // 下拉结束
 62 | let end = ref<boolean>(false)
 63 | let tips = ref<string>(props.loadingText)
 64 | 
 65 | let touchstart = (e: TouchEvent) => {
 66 |   duration.value = 0
 67 |   startY.value = e.changedTouches[0].clientY
 68 | }
 69 | let touchmove = (e: TouchEvent) => {
 70 |   let move = e.changedTouches[0].clientY
 71 |   let dis = startY.value - move
 72 |   if (dis > 0) return
 73 |   moveY.value = -Math.floor(dis)
 74 | }
 75 | let touchend = (e: TouchEvent) => {
 76 |   duration.value = 0.3
 77 |   end.value = true
 78 |   moveY.value = Number(props.headHeight)
 79 |   if (props.successText) {
 80 |     setTimeout(() => {
 81 |       tips.value = props.successText
 82 |       emits('refresh')
 83 |     }, 800)
 84 |   }
 85 |   setTimeout(() => {
 86 |     moveY.value = 0
 87 |   }, 1000)
 88 |   setTimeout(() => {
 89 |     end.value = false
 90 |     tips.value = props.loadingText
 91 |   }, 1100)
 92 | }
 93 | </script>
 94 | 
 95 | <style scoped lang="scss">
 96 | .cc-pull-refresh {
 97 |   overflow: hidden;
 98 |   &-wrap {
 99 |     height: 100%;
100 |     position: relative;
101 |     transition-property: transform;
102 |     &-head {
103 |       position: absolute;
104 |       left: 0;
105 |       width: 100%;
106 |       overflow: hidden;
107 |       color: #969799;
108 |       font-size: 14px;
109 |       display: flex;
110 |       align-items: center;
111 |       justify-content: center;
112 |       transform: translateY(-100%);
113 |     }
114 |   }
115 | }
116 | </style>


--------------------------------------------------------------------------------
/src/views/grid/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="demo">
  3 |     <div class="demo-title">基础用法</div>
  4 |     <div class="demo-item">
  5 |       <cc-grid @clickItem="clickItem" :list="list1"></cc-grid>
  6 |     </div>
  7 | 
  8 |     <div class="demo-title">设置列数</div>
  9 |     <div class="demo-item">
 10 |       <cc-grid :column="3" :list="list2"></cc-grid>
 11 |     </div>
 12 | 
 13 |     <div class="demo-title">设置间距</div>
 14 |     <div class="demo-item">
 15 |       <cc-grid :list="list1" :gutter="20"></cc-grid>
 16 |     </div>
 17 | 
 18 |     <div class="demo-title">自定义样式</div>
 19 |     <div class="demo-item">
 20 |       <cc-grid :list="list3"></cc-grid>
 21 |     </div>
 22 | 
 23 |     <div class="demo-title">内容横向排列</div>
 24 |     <div class="demo-item">
 25 |       <cc-grid :list="list1" vertical></cc-grid>
 26 |     </div>
 27 | 
 28 |     <div class="demo-title">徽标提示</div>
 29 |     <div class="demo-item">
 30 |       <cc-grid :list="list4"></cc-grid>
 31 |     </div>
 32 |   </div>
 33 | </template>
 34 | 
 35 | <script setup lang="ts">
 36 | let list1 = [
 37 |   {
 38 |     text: '文字',
 39 |     icon: 'image'
 40 |   },
 41 |   {
 42 |     text: '文字',
 43 |     icon: 'image'
 44 |   },
 45 |   {
 46 |     text: '文字',
 47 |     icon: 'image'
 48 |   },
 49 |   {
 50 |     text: '文字',
 51 |     icon: 'image'
 52 |   }
 53 | ]
 54 | let list2 = [
 55 |   {
 56 |     text: '文字',
 57 |     icon: 'image'
 58 |   },
 59 |   {
 60 |     text: '文字',
 61 |     icon: 'image'
 62 |   },
 63 |   {
 64 |     text: '文字',
 65 |     icon: 'image'
 66 |   },
 67 |   {
 68 |     text: '文字',
 69 |     icon: 'image'
 70 |   },
 71 |   {
 72 |     text: '文字',
 73 |     icon: 'image'
 74 |   },
 75 |   {
 76 |     text: '文字',
 77 |     icon: 'image'
 78 |   }
 79 | ]
 80 | let list3 = [
 81 |   {
 82 |     text: '文字',
 83 |     icon: 'image',
 84 |     textColor: '#1989fa',
 85 |     iconColor: 'red',
 86 |     textSize: '16'
 87 |   },
 88 |   {
 89 |     text: '文字',
 90 |     icon: 'image',
 91 |     textColor: '#123456',
 92 |     iconColor: 'orange',
 93 |     textSize: '16'
 94 |   },
 95 |   {
 96 |     text: '文字',
 97 |     icon: 'image',
 98 |     textColor: '#654321',
 99 |     iconColor: 'green',
100 |     textSize: '16'
101 |   },
102 |   {
103 |     text: '文字',
104 |     icon: 'image',
105 |     textColor: '#123789',
106 |     iconColor: '#946721',
107 |     textSize: '16'
108 |   }
109 | ]
110 | let list4 = [
111 |   {
112 |     text: '文字',
113 |     icon: 'image',
114 |     dot: true
115 |   },
116 |   {
117 |     text: '文字',
118 |     icon: 'image',
119 |     badge: '5'
120 |   },
121 |   {
122 |     text: '文字',
123 |     icon: 'image',
124 |     dot: true
125 |   },
126 |   {
127 |     text: '文字',
128 |     icon: 'image',
129 |     badge: '99+'
130 |   }
131 | ]
132 | let clickItem = (val: any) => {
133 |   console.log('click', val)
134 | }
135 | </script>
136 | 
137 | <style scoped lang="scss">
138 | .demo {
139 |   background: #f7f8fa;
140 |   &-title {
141 |     padding: #{topx(10)};
142 |   }
143 |   &-item {
144 |     margin-bottom: #{topx(30)};
145 |     &:last-child {
146 |       margin-bottom: 0;
147 |     }
148 |   }
149 | }
150 | </style>
151 | 


--------------------------------------------------------------------------------
/src/components/cc-form/types.ts:
--------------------------------------------------------------------------------
 1 | import { CSSProperties } from "vue"
 2 | import { FieldErrorList } from 'async-validator'
 3 | 
 4 | export interface Callback {
 5 |   (isValid?: boolean, invalidFields?: FieldErrorList): void,
 6 | }
 7 | 
 8 | export type RuleType =
 9 |   | 'string'
10 |   | 'number'
11 |   | 'boolean'
12 |   | 'method'
13 |   | 'regexp'
14 |   | 'integer'
15 |   | 'float'
16 |   | 'array'
17 |   | 'object'
18 |   | 'enum'
19 |   | 'date'
20 |   | 'url'
21 |   | 'hex'
22 |   | 'email'
23 |   | 'any'
24 | 
25 | export interface ValidateOption {
26 |   // whether to suppress internal warning
27 |   suppressWarning?: boolean
28 | 
29 |   // when the first validation rule generates an error stop processed
30 |   first?: boolean
31 | 
32 |   // when the first validation rule of the specified field generates an error stop the field processed, 'true' means all fields.
33 |   firstFields?: boolean | string[]
34 | }
35 | export interface ValidateSource {
36 |   [field: string]: any
37 | }
38 | 
39 | export interface RuleItem {
40 |   type?: RuleType // default type is 'string'
41 |   required?: boolean
42 |   pattern?: RegExp | string
43 |   min?: number // Range of type 'string' and 'array'
44 |   max?: number // Range of type 'string' and 'array'
45 |   len?: number // Length of type 'string' and 'array'
46 |   enum?: Array<string | number | boolean | null | undefined> // possible values of type 'enum'
47 |   whitespace?: boolean
48 |   fields?: Rules // ignore when without required
49 |   options?: ValidateOption,
50 |   trigger?: 'change' | 'blur'
51 |   defaultField?: RuleItem // 'object' or 'array' containing validation rules
52 |   transform?: (value: any) => any
53 |   message?: string | (() => string)
54 |   asyncValidator?: (
55 |     rule: Rules,
56 |     value: any,
57 |     callback: (error: string | string[] | void) => void,
58 |     source: ValidateSource,
59 |     options: ValidateOption,
60 |   ) => void | Promise<void>
61 |   validator?: (
62 |     rule: Rules,
63 |     value: any,
64 |     callback: (error: string | string[] | void) => void,
65 |     source: ValidateSource,
66 |     options: ValidateOption,
67 |   ) => void
68 | }
69 | 
70 | export interface Rules {
71 |   [field: string]: RuleItem | RuleItem[]
72 | }
73 | 
74 | export interface ValidateFieldCallback {
75 |   (message?: string, invalidFields?: FieldErrorList): void,
76 | }
77 | 
78 | export interface FormInstance {
79 |   registerLabelWidth(width: number, oldWidth: number): void,
80 |   deregisterLabelWidth(width: number): void,
81 |   autoLabelWidth: string | undefined,
82 |   emit: (evt: string, ...args: any[]) => void,
83 |   labelSuffix: string,
84 |   inline?: boolean,
85 |   model?: Record<string, unknown>,
86 |   size?: string,
87 |   showMessage?: boolean,
88 |   labelPosition?: string,
89 |   labelWidth?: string,
90 |   rules?: Record<string, unknown>,
91 |   statusIcon?: boolean,
92 |   hideRequiredAsterisk?: boolean,
93 |   disabled?: boolean,
94 |   validate: (callback?: Callback) => Promise<boolean>,
95 |   resetFields: () => void,
96 |   clearValidate: (props?: string | string[]) => void,
97 |   validateField: (props: string | string[], cb: ValidateFieldCallback) => void,
98 | }


--------------------------------------------------------------------------------
/src/views/slider/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="demo">
  4 |       <div class="demo-title">基础用法</div>
  5 |       <div class="demo-item">
  6 |         <cc-slider
  7 |           v-model:value="sliderValue"
  8 |           @touchstart="touchstart"
  9 |           @touchend="touchend"
 10 |           @change="onChange"
 11 |           @input="onInput"
 12 |         ></cc-slider>
 13 |       </div>
 14 |       <div>当前滑块值: {{ sliderValue }}</div>
 15 |     </div>
 16 | 
 17 |     <div class="demo">
 18 |       <div class="demo-title">禁用状态</div>
 19 |       <div class="demo-item">
 20 |         <cc-slider v-model:value="sliderValue" disabled></cc-slider>
 21 |       </div>
 22 |       <div>当前滑块值: {{ sliderValue }}</div>
 23 |     </div>
 24 | 
 25 |     <div class="demo">
 26 |       <div class="demo-title">自定义样式</div>
 27 |       <div class="demo-item">
 28 |         <cc-slider v-model:value="sliderValue" activeColor="#ee0a24" inactiveColor="#abc123"></cc-slider>
 29 |       </div>
 30 |       <div>当前滑块值: {{ sliderValue }}</div>
 31 |     </div>
 32 | 
 33 |     <div class="demo">
 34 |       <div class="demo-title">自定义按钮</div>
 35 |       <div class="demo-item">
 36 |         <cc-slider v-model:value="sliderValue">
 37 |           <template #button>
 38 |             <div class="custom-button">{{ sliderValue }}</div>
 39 |           </template>
 40 |         </cc-slider>
 41 |       </div>
 42 |       <div>当前滑块值: {{ sliderValue }}</div>
 43 |     </div>
 44 | 
 45 |     <div class="demo">
 46 |       <div class="demo-title">最大值和最小值</div>
 47 |       <div class="demo-item">
 48 |         <cc-slider min='10' max='80' v-model:value="sliderValue"></cc-slider>
 49 |       </div>
 50 |       <div>当前滑块值: {{ sliderValue }}</div>
 51 |     </div>
 52 | 
 53 |     <div class="demo">
 54 |       <div class="demo-title">步进</div>
 55 |       <div class="demo-item">
 56 |         <cc-slider step='5' v-model:value="sliderValue"></cc-slider>
 57 |       </div>
 58 |       <div>当前滑块值: {{ sliderValue }}</div>
 59 |     </div>
 60 | 
 61 |     <div class="demo">
 62 |       <div class="demo-title">自定义高度</div>
 63 |       <div class="demo-item">
 64 |         <cc-slider height='6' v-model:value="sliderValue"></cc-slider>
 65 |       </div>
 66 |       <div>当前滑块值: {{ sliderValue }}</div>
 67 |     </div>
 68 | 
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script setup lang="ts">
 73 | import { ref } from 'vue'
 74 | let sliderValue = ref<number>(20)
 75 | 
 76 | let touchstart = () => {
 77 |   console.log('touchstart')
 78 | }
 79 | let touchend = () => {
 80 |   console.log('touchend')
 81 | }
 82 | let onInput = (val: string) => {
 83 |   console.log('input', val)
 84 | }
 85 | let onChange = (val: string) => {
 86 |   console.log('change', val)
 87 | }
 88 | </script>
 89 | 
 90 | <style scoped lang='scss'>
 91 | .demo {
 92 |   margin-bottom: #{topx(20)};
 93 |   &-title {
 94 |     padding: #{topx(10)};
 95 |   }
 96 |   &-item {
 97 |     padding: 0 5px;
 98 |     margin-bottom: 10px;
 99 |   }
100 | }
101 | .custom-button {
102 |   width: 26px;
103 |   color: #fff;
104 |   font-size: 10px;
105 |   line-height: 18px;
106 |   text-align: center;
107 |   background-color: #ee0a24;
108 |   border-radius: 100px;
109 | }
110 | </style>


--------------------------------------------------------------------------------
/src/views/collapse/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="title">基础用法</div>
  4 |     <div class="title">
  5 |       <cc-collapse :list="list1"></cc-collapse>
  6 |     </div>
  7 | 
  8 |     <div class="title">右侧箭头显示和样式</div>
  9 |     <div class="item">
 10 |       <cc-collapse  :list="list2"></cc-collapse>
 11 |     </div>
 12 | 
 13 |     <div class="title">默认展开项</div>
 14 |     <div class="item">
 15 |       <cc-collapse :current="current1"  :list="list1"></cc-collapse>
 16 |     </div>
 17 | 
 18 |     <div class="title">手风琴模式</div>
 19 |     <div class="item">
 20 |       <cc-collapse accordion  :list="list1"></cc-collapse>
 21 |     </div>
 22 | 
 23 |     <div class="title">禁用和无边框</div>
 24 |     <div class="item">
 25 |       <cc-collapse  :list="list3"></cc-collapse>
 26 |     </div>
 27 | 
 28 |     <div class="title">自定义内容</div>
 29 |     <div class="item">
 30 |       <cc-collapse  :list="list4">
 31 |         <template #title>
 32 |           <cc-icon type='search'></cc-icon>
 33 |           搜索
 34 |         </template>
 35 |         <template #content>
 36 |           <div style="color: red;">回到过去</div>
 37 |         </template>
 38 |         <template #value>
 39 |           <div>轨迹</div>
 40 |         </template>
 41 |       </cc-collapse>
 42 |     </div>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script setup lang="ts">
 47 | import { CollapseItem } from "@/components/cc-collapse/cc-collapse.vue";
 48 | import {ref} from 'vue'
 49 | let current1 = ref<number>(1)
 50 | let list1: CollapseItem[] = [
 51 |   {
 52 |     title: '晴天',
 53 |     content: '故事的小黄花，从出生那年就飘着童年的荡秋千，随记忆一直晃到现在故事的小黄花，从出生那年就飘着童年的荡秋千，随记忆一直晃到现在'
 54 |   },
 55 |   {
 56 |     title: '晴天',
 57 |     content: '吹着前奏望着天空，我想起花瓣试着掉落为你翘课的那一天，花落的那一天教室的那一间，我怎么看不见消失的下雨天，我好想再淋一遍'
 58 |   },
 59 |   {
 60 |     title: '晴天',
 61 |     content: '站在屋顶只对风说，不想被左右，本来讨厌下雨的天空，直到听见有人说爱我'
 62 |   }
 63 | ]
 64 | let list2: CollapseItem[] = [
 65 |   {
 66 |     title: '你听得到',
 67 |     content: '有谁能比我知道，你的温柔像羽毛，秘密躺在我怀抱，只有你能听得到',
 68 |     arrow: false
 69 |   },
 70 |   {
 71 |     title: '你听得到',
 72 |     content: '还有没有人知道，你的微笑像拥抱，多想藏着你的好，只有我看得到',
 73 |     arrowColor: "#123abc"
 74 |   },
 75 |   {
 76 |     title: '你听得到',
 77 |     content: '没想到失去的勇气我还留着，好想再问一遍你会等待还是离开，刮风这天我试过握着你手但偏偏雨渐渐，大到我看你不见还要多久我才能在你身边，等到放晴的那天我会比较好一点',
 78 |     arrowSize: "20"
 79 |   }
 80 | ]
 81 | let list3: CollapseItem[] = [
 82 |   {
 83 |     title: '你听得到',
 84 |     content: '坐在电影院的二楼，看人群走过，怎么那一天的我们，都默默的微笑很久',
 85 |     disabled: true
 86 |   },
 87 |   {
 88 |     title: '你听得到',
 89 |     content: '我想我是太过依赖，在挂电话的刚才，坚持学单纯的小孩，静静看守这份爱',
 90 |     border: false
 91 |   },
 92 |   {
 93 |     title: '你听得到',
 94 |     content: '知道不能太依赖，怕你会把我宠坏，你的香味一直徘徊，我舍不得离开'
 95 |   }
 96 | ]
 97 | let list4: CollapseItem[] = [
 98 |   {
 99 |     titleSlot: true,
100 |     contentSlot: true,
101 |     rightSlot: true
102 |   },
103 |   {
104 |     titleSlot: true,
105 |     contentSlot: true,
106 |     rightSlot: true
107 |   }
108 | ]
109 | 
110 | 
111 | </script>
112 | 
113 | <style scoped lang="scss">
114 | .title {
115 |   margin: #{topx(10)};
116 | }
117 | .item {
118 |   display: flex;
119 |   flex-wrap: wrap;
120 |   align-items: center;
121 |   button {
122 |     margin-right: #{topx(5)};
123 |   }
124 | }
125 | </style>


--------------------------------------------------------------------------------
/src/components/cc-swipe-cell/cc-swipe-cell.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="cc-swipe-cell"
  4 |     @touchstart="touchStart"
  5 |     @touchend="touchEnd"
  6 |     @touchmove="touchMove"
  7 |   >
  8 |     <div class="cc-swipe-cell-wrap" :style="{ transform: `translateX(${slideX}px)`, transitionDuration }">
  9 |       <div class="cc-swipe-cell-wrap-left">
 10 |         <slot name="left"></slot>
 11 |       </div>
 12 |       <div class="cc-swipe-cell-wrap-content" @click="handleClick">
 13 |         <slot></slot>
 14 |       </div>
 15 |       <div class="cc-swipe-cell-wrap-right">
 16 |         <slot name="right"></slot>
 17 |       </div>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script setup lang="ts">
 23 | import { ref, onMounted, defineEmits } from 'vue'
 24 | let slideX = ref<number>(0)
 25 | let startSlideX = ref<number>(0)
 26 | let btnWidth = ref<number>(0)
 27 | let startX = ref<number>(0)
 28 | let lastX = ref<number>(0)
 29 | let startTime = ref<number>(0)
 30 | let transitionDuration = ref<string>('0.6s')
 31 | 
 32 | let emits = defineEmits(['click'])
 33 | 
 34 | onMounted(() => {
 35 |   let right = document.getElementsByClassName('cc-swipe-cell-wrap-right')[0]
 36 |   let left = document.getElementsByClassName('cc-swipe-cell-wrap-left')[0]
 37 |   btnWidth.value = right.clientWidth * -1
 38 | })
 39 | // 滑动开始
 40 | let touchStart = (e: TouchEvent) => {
 41 |   startTime.value = e.timeStamp
 42 |   //记录滑块的初始位置
 43 |   startSlideX.value = slideX.value
 44 |   startX.value = e.touches[0].pageX
 45 |   lastX.value = startX.value
 46 |   transitionDuration.value = '0s'
 47 | }
 48 | // 滑动中
 49 | let touchMove = (e: TouchEvent) => {
 50 |   let endX = e.touches[0].pageX
 51 |   let distance = endX - lastX.value
 52 |   let dis = slideX.value + distance
 53 |   if (dis <= 0 && dis >= btnWidth.value) {
 54 |     slideX.value = dis
 55 |   }
 56 |   lastX.value = endX
 57 |   transitionDuration.value = '0s'
 58 | }
 59 | // 滑动结束
 60 | let touchEnd = (e: TouchEvent) => {
 61 |   let distance = 10
 62 |   let endTime = e.timeStamp
 63 |   let endX = startX.value - lastX.value
 64 |   if (Math.abs(endTime - startTime.value) > 200) {
 65 |     distance = btnWidth.value / -2
 66 |   }
 67 |   if (endX > distance) {
 68 |     slideX.value = btnWidth.value
 69 |   } else if (endX < distance * -1) {
 70 |     slideX.value = 0
 71 |   } else {
 72 |     slideX.value = startSlideX.value
 73 |   }
 74 |   transitionDuration.value = '0.6s'
 75 | }
 76 | 
 77 | let handleClick = () => {
 78 |   slideX.value = 0
 79 |   emits('click')
 80 | }
 81 | </script>
 82 | 
 83 | <style scoped lang="scss">
 84 | .cc-swipe-cell {
 85 |   position: relative;
 86 |   overflow: hidden;
 87 |   cursor: grab;
 88 |   &-wrap {
 89 |     width: 100%;
 90 |     display: flex;
 91 |     align-items: center;
 92 |     position: relative;
 93 |     transition: all 0.6s linear;
 94 |     &-left {
 95 |       height: 100%;
 96 |       position: absolute;
 97 |       top: 0;
 98 |       left: 0;
 99 |       transform: translateX(-100%);
100 |     }
101 |     &-right {
102 |       height: 100%;
103 |       position: absolute;
104 |       top: 0;
105 |       right: 0;
106 |       transform: translateX(100%);
107 |     }
108 |     &-content {
109 |       flex: 1;
110 |     }
111 |   }
112 | }
113 | </style>


--------------------------------------------------------------------------------
/src/components/cc-tabs/cc-tabs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-tabs">
  3 |     <div class="cc-tabs-wrap">
  4 |       <div
  5 |         @click="clickItem(item, index)"
  6 |         class="cc-tabs-content"
  7 |         v-for="(item, index) in list"
  8 |         :key="index"
  9 |       >
 10 |         <div
 11 |           class="cc-tabs-content-title"
 12 |           :style="{ color: active === index ? activeColor : inactiveColor }"
 13 |         >
 14 |           {{ item.title }}
 15 |           <div
 16 |             v-if="active === index"
 17 |             class="cc-tabs-content-line"
 18 |             :style="{
 19 |               width: lineWidth + 'px',
 20 |               height: lineHeight + 'px',
 21 |               background: lineColor,
 22 |             }"
 23 |           ></div>
 24 |         </div>
 25 |       </div>
 26 |     </div>
 27 |     <slot></slot>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script setup lang="ts">
 32 | 
 33 | export interface TabsListItem {
 34 |   // 标题
 35 |   title: string,
 36 |   // 是否禁用
 37 |   disabled?: boolean,
 38 |   // 是否显示小红点
 39 |   dot?: false,
 40 |   // 徽标的内容
 41 |   badge?: string | number,
 42 |   // 标识符
 43 |   name?: string | number,
 44 |   // 跳转链接地址
 45 |   url?: string
 46 | }
 47 | 
 48 | import { defineProps, defineEmits, ref, PropType, onMounted, watch } from 'vue'
 49 | let props = defineProps({
 50 |   list: {
 51 |     type: Array as PropType<TabsListItem[]>,
 52 |     required: true
 53 |   },
 54 |   // 当前激活项
 55 |   current: {
 56 |     type: [String, Number],
 57 |     default: ''
 58 |   },
 59 |   // 底部滑块宽度
 60 |   lineWidth: {
 61 |     type: [Number, String],
 62 |     default: 20
 63 |   },
 64 |   // 底部滑块高度
 65 |   lineHeight: {
 66 |     type: [Number, String],
 67 |     default: 3
 68 |   },
 69 |   // 底部滑块颜色
 70 |   lineColor: {
 71 |     type: String,
 72 |     default: '#2979ff'
 73 |   },
 74 |   // 激活时的文字颜色
 75 |   activeColor: {
 76 |     type: String,
 77 |     default: '#2979ff'
 78 |   },
 79 |   // 标签栏文字
 80 |   inactiveColor: {
 81 |     type: String,
 82 |     default: '#303133'
 83 |   }
 84 | })
 85 | let emits = defineEmits(['change'])
 86 | 
 87 | 
 88 | let active = ref<string | number>(0)
 89 | 
 90 | 
 91 | onMounted(() => {
 92 |   if (!props.current) active.value = 0
 93 |   else {
 94 |     let index = props.list.findIndex((item, index) => {
 95 |       if (typeof props.current === 'number') return props.current === index
 96 |       else return item.title === props.current
 97 |     })
 98 |     active.value = index
 99 |   }
100 | })
101 | 
102 | let clickItem = (item: TabsListItem, index: number) => {
103 |   active.value = index
104 | }
105 | 
106 | watch(() => active.value, val => {
107 |   emits('change', val)
108 | })
109 | </script>
110 | 
111 | <style scoped lang="scss">
112 | .cc-tabs {
113 |   &-wrap {
114 |     overflow: hidden;
115 |     display: flex;
116 |     align-items: center;
117 |   }
118 |   &-content {
119 |     flex: 1 0 auto;
120 |     display: flex;
121 |     justify-content: center;
122 |     &-title {
123 |       padding:8px 10px;
124 |       font-size: 12px;
125 |       position: relative;
126 |     }
127 |     &-line {
128 |       border-radius: 3px;
129 |       position: absolute;
130 |       left: 50%;
131 |       transform: translateX(-50%);
132 |       bottom: 2px;
133 |       z-index: 1;
134 |     }
135 |   }
136 | }
137 | </style>


--------------------------------------------------------------------------------
/src/views/checker/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="demo">
  4 |       <div class="demo-title">基础用法</div>
  5 |       <div class="demo-item">
  6 |         <cc-checker :list="list1" v-model:value="value1" @change="handleChange"></cc-checker>
  7 |       </div>
  8 |     </div>
  9 | 
 10 |     <div class="demo">
 11 |       <div class="demo-title">多选</div>
 12 |       <div class="demo-item">
 13 |         <cc-checker :list="list1" v-model:value="value2" multiple @change="handleChange"></cc-checker>
 14 |       </div>
 15 |     </div>
 16 | 
 17 |     <div class="demo">
 18 |       <div class="demo-title">圆角类型</div>
 19 |       <div class="demo-item">
 20 |         <cc-checker :list="list2" v-model:value="value1"></cc-checker>
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <div class="demo">
 25 |       <div class="demo-title">只读状态</div>
 26 |       <div class="demo-item">
 27 |         <cc-checker :list="list3" v-model:value="value1"></cc-checker>
 28 |       </div>
 29 |     </div>
 30 | 
 31 |     <div class="demo">
 32 |       <div class="demo-title">禁用状态</div>
 33 |       <div class="demo-item">
 34 |         <cc-checker :list="list4" v-model:value="value1"></cc-checker>
 35 |       </div>
 36 |     </div>
 37 | 
 38 |     <div class="demo">
 39 |       <div class="demo-title">徽标</div>
 40 |       <div class="demo-item">
 41 |         <cc-checker :list="list5" v-model:value="value1"></cc-checker>
 42 |       </div>
 43 |     </div>
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script setup lang="ts">
 48 | import { ref } from "vue"
 49 | 
 50 | let value1 = ref<number>(0)
 51 | let value2 = ref<number[]>([1, 2])
 52 | let list1 = [
 53 |   {
 54 |     label: '彷徨',
 55 |     value: 0
 56 |   },
 57 |   {
 58 |     label: '呐喊',
 59 |     value: 1
 60 |   },
 61 |   {
 62 |     label: '动物凶猛',
 63 |     value: 2
 64 |   }
 65 | ]
 66 | let list2 = [
 67 |   {
 68 |     label: '彷徨',
 69 |     value: 0,
 70 |     round: true
 71 |   },
 72 |   {
 73 |     label: '呐喊',
 74 |     value: 1,
 75 |     round: true
 76 |   },
 77 |   {
 78 |     label: '动物凶猛',
 79 |     value: 2,
 80 |     round: true
 81 |   }
 82 | ]
 83 | let list3 = [
 84 |   {
 85 |     label: '彷徨',
 86 |     value: 0,
 87 |     readonly: true
 88 |   },
 89 |   {
 90 |     label: '呐喊',
 91 |     value: 1,
 92 |     readonly: true
 93 |   },
 94 |   {
 95 |     label: '动物凶猛',
 96 |     value: 2,
 97 |     readonly: true
 98 |   }
 99 | ]
100 | let list4 = [
101 |   {
102 |     label: '彷徨',
103 |     value: 0,
104 |     disabled: true
105 |   },
106 |   {
107 |     label: '呐喊',
108 |     value: 1,
109 |     disabled: true
110 |   },
111 |   {
112 |     label: '动物凶猛',
113 |     value: 2,
114 |     disabled: true
115 |   }
116 | ]
117 | let list5 = [
118 |   {
119 |     label: '彷徨',
120 |     value: 0,
121 |     info: '99'
122 |   },
123 |   {
124 |     label: '呐喊',
125 |     value: 1,
126 |     disabled: true
127 |   },
128 |   {
129 |     label: '动物凶猛',
130 |     value: 2,
131 |     info: 'ok',
132 |     round: true
133 |   }
134 | ]
135 | 
136 | let handleChange = (val: any) => {
137 |   console.log(val)
138 | }
139 | </script>
140 | 
141 | <style scoped lang="scss">
142 | .demo {
143 |   margin-bottom: 20px;
144 |   padding: 10px;
145 |   &-title {
146 |     padding: 10px;
147 |   }
148 |   &-item {
149 |     padding: 0 5px;
150 |     margin-bottom: 10px;
151 |   }
152 | }
153 | </style>


--------------------------------------------------------------------------------
/src/components/cc-switch/cc-switch.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-switch">
  3 |     <div
  4 |       class="cc-switch-wrap"
  5 |       :class="{ disabled }"
  6 |       :style="{ background: value ? activeColor : inactiveColor, fontSize: size + 'px' }"
  7 |       @click="clickSwitch"
  8 |     >
  9 |       <div class="cc-switch-wrap-node" :style="{ transform: `translateX(${move})` }"></div>
 10 |     </div>
 11 |     <div
 12 |       v-if="activeText"
 13 |       class="cc-switch-text"
 14 |       :style="{ color: value ? activeTextColor : inactiveTextColor }"
 15 |     >{{ value ? activeText : inactiveText ? inactiveText : activeText }}</div>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script setup lang="ts">
 20 | import { ref, defineProps, defineEmits, watch } from "vue"
 21 | 
 22 | 
 23 | let props = defineProps({
 24 |   // 选中的值
 25 |   value: {
 26 |     type: [String, Number, Boolean],
 27 |     default: false
 28 |   },
 29 |   // 显示文字
 30 |   text: {
 31 |     type: String,
 32 |     default: ''
 33 |   },
 34 |   // 选中时的背景颜色
 35 |   activeColor: {
 36 |     type: String,
 37 |     default: '#0081ff'
 38 |   },
 39 |   // 未选中时的背景颜色
 40 |   inactiveColor: {
 41 |     type: String,
 42 |     default: '#fff'
 43 |   },
 44 |   // 选中时的背景颜色
 45 |   activeTextColor: {
 46 |     type: String,
 47 |     default: '#0081ff'
 48 |   },
 49 |   // 未选中时的背景颜色
 50 |   inactiveTextColor: {
 51 |     type: String,
 52 |     default: '#303133'
 53 |   },
 54 |   // 选中时的背景颜色
 55 |   activeText: {
 56 |     type: String,
 57 |     default: ''
 58 |   },
 59 |   // 未选中时的背景颜色
 60 |   inactiveText: {
 61 |     type: String,
 62 |     default: ''
 63 |   },
 64 |   // 是否禁用
 65 |   disabled: {
 66 |     type: Boolean,
 67 |     default: false
 68 |   },
 69 |   // 尺寸
 70 |   size: {
 71 |     type: String,
 72 |     default: '24'
 73 |   }
 74 | })
 75 | let emits = defineEmits(['update:value', 'change'])
 76 | 
 77 | // 移动距离
 78 | let move = ref<string>('')
 79 | let checked = ref<boolean>(false)
 80 | 
 81 | let clickSwitch = () => {
 82 |   emits('update:value', !props.value)
 83 | }
 84 | 
 85 | 
 86 | watch(() => props.value, val => {
 87 |   checked.value = val as boolean
 88 |   move.value = props.value ? '1em' : '0'
 89 | }, { immediate: true })
 90 | 
 91 | watch(() => props.value, val => {
 92 |   emits('change', val)
 93 | })
 94 | 
 95 | </script>
 96 | 
 97 | <style scoped lang='scss'>
 98 | .cc-switch {
 99 |   display: flex;
100 |   align-items: center;
101 |   .cc-switch-wrap {
102 |     position: relative;
103 |     display: flex;
104 |     box-sizing: content-box;
105 |     align-items: center;
106 |     width: 2em;
107 |     height: 1em;
108 |     background-color: #fff;
109 |     border: 1px solid rgba(0, 0, 0, 0.1);
110 |     border-radius: 1em;
111 |     transition: background-color 0.3s;
112 |     &-node {
113 |       position: absolute;
114 |       top: 0;
115 |       left: 0;
116 |       width: 1em;
117 |       height: 1em;
118 |       background-color: #fff;
119 |       border-radius: 100%;
120 |       box-shadow: 0 3px 1px 0 rgb(0 0 0 / 5%), 0 2px 2px 0 rgb(0 0 0 / 10%),
121 |         0 3px 3px 0 rgb(0 0 0 / 5%);
122 |       transition: transform 0.3s;
123 |     }
124 |   }
125 |   &-text {
126 |     font-size: 16px;
127 |     margin-left: #{topx(6)};
128 |   }
129 | }
130 | .disabled {
131 |   cursor: not-allowed;
132 |   opacity: 0.5;
133 |   pointer-events: none;
134 | }
135 | </style>


--------------------------------------------------------------------------------
/src/views/search/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div>
  4 |       <div class="title">基础语法</div>
  5 |       <div>
  6 |         <cc-search
  7 |           v-model:value="value"
  8 |           @input="handleInput"
  9 |           @focus="handleFocus"
 10 |           @blur="handleBlur"
 11 |           @confirm="handleConfirm"
 12 |           @close="close"
 13 |           @cancel="cancel"
 14 |         ></cc-search>
 15 |       </div>
 16 |     </div>
 17 | 
 18 |     <div>
 19 |       <div class="title">圆形</div>
 20 |       <div>
 21 |         <cc-search v-model:value="value" round></cc-search>
 22 |       </div>
 23 |     </div>
 24 | 
 25 |     <div>
 26 |       <div class="title">文字对齐方式</div>
 27 |       <div>
 28 |         <cc-search v-model:value="value" textAlign="center"></cc-search>
 29 |       </div>
 30 |       <div>
 31 |         <cc-search v-model:value="value" textAlign="right"></cc-search>
 32 |       </div>
 33 |     </div>
 34 | 
 35 |     <div>
 36 |       <div class="title">图标对齐方式</div>
 37 |       <div>
 38 |         <cc-search v-model:value="value" iconAlign="center" textAlign="center"></cc-search>
 39 |       </div>
 40 |       <div>
 41 |         <cc-search v-model:value="value" iconAlign="right" textAlign="right"></cc-search>
 42 |       </div>
 43 |     </div>
 44 | 
 45 |     <div>
 46 |       <div class="title">自定义图标</div>
 47 |       <div>
 48 |         <cc-search v-model:value="value" round icon="person"></cc-search>
 49 |       </div>
 50 |     </div>
 51 | 
 52 |     <div>
 53 |       <div class="title">左侧内容</div>
 54 |       <div>
 55 |         <cc-search v-model:value="value" round label="地址"></cc-search>
 56 |       </div>
 57 |     </div>
 58 | 
 59 |     <div>
 60 |       <div class="title">禁用</div>
 61 |       <div>
 62 |         <cc-search v-model:value="value" round disabled></cc-search>
 63 |       </div>
 64 |     </div>
 65 | 
 66 |     <div>
 67 |       <div class="title">自定义左侧内容</div>
 68 |       <div>
 69 |         <cc-search v-model:value="value" round>
 70 |           <template #label>
 71 |             <div class="label">
 72 |               <div>地址</div>
 73 |               <div style="margin-left: 8rpx">
 74 |                 <cc-icon type="arrowdown" size="10"></cc-icon>
 75 |               </div>
 76 |             </div>
 77 |           </template>
 78 |         </cc-search>
 79 |       </div>
 80 |     </div>
 81 | 
 82 |     <div>
 83 |       <div class="title">自定义右侧内容</div>
 84 |       <div>
 85 |         <cc-search v-model:value="value" round>
 86 |           <template #action>
 87 |             <div>搜索</div>
 88 |           </template>
 89 |         </cc-search>
 90 |       </div>
 91 |     </div>
 92 |   </div>
 93 | </template>
 94 | 
 95 | <script lang='ts' setup>
 96 | import { ref } from "vue"
 97 | 
 98 | let value = ref('')
 99 | 
100 | let close = () => {
101 |   console.log('close')
102 | }
103 | let cancel = () => {
104 |   console.log('cancel')
105 | }
106 | let handleInput = (e: Event) => {
107 |   console.log('input', e)
108 | }
109 | let handleFocus = (e: Event) => {
110 |   console.log('focus', e)
111 | }
112 | let handleBlur = (e: Event) => {
113 |   console.log('blur', e)
114 | }
115 | let handleConfirm = (e: Event) => {
116 |   console.log('confirm', e)
117 | }
118 | </script>
119 | 
120 | <style lang='scss' scoped>
121 | .title {
122 |   margin: #{topx(10)};
123 | }
124 | .label {
125 |   display: flex;
126 |   align-items: center;
127 | }
128 | </style>


--------------------------------------------------------------------------------
/src/views/treeSelect/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="background: #f7f7f7;height: 100vh;">
  3 |     <div class="demo">
  4 |       <div class="demo-title">基础用法</div>
  5 |       <div class="demo-item">
  6 |         <cc-tree-select
  7 |           @clickNav="clickNav"
  8 |           @clickItem="clickItem"
  9 |           :items="items1"
 10 |           :active-id="activeId1"
 11 |           :main-active-index="activeIndex1"
 12 |         ></cc-tree-select>
 13 |       </div>
 14 |     </div>
 15 | 
 16 |     <div class="demo">
 17 |       <div class="demo-title">多选模式</div>
 18 |       <div class="demo-item">
 19 |         <cc-tree-select
 20 |           @clickNav="clickNav"
 21 |           @clickItem="clickItem"
 22 |           :items="items1"
 23 |           :active-id="activeId2"
 24 |           :main-active-index="activeIndex2"
 25 |         ></cc-tree-select>
 26 |       </div>
 27 |     </div>
 28 | 
 29 |     <div class="demo">
 30 |       <div class="demo-title">徽标提示</div>
 31 |       <div class="demo-item">
 32 |         <cc-tree-select :items="items2" :active-id="activeId1" :main-active-index="activeIndex1"></cc-tree-select>
 33 |       </div>
 34 |     </div>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script setup lang="ts">
 39 | let activeId1 = 1
 40 | let activeIndex1 = 0
 41 | let activeId2 = [1, 2]
 42 | let activeIndex2 = 0
 43 | 
 44 | let items1 = [
 45 |   {
 46 |     text: '浙江',
 47 |     children: [
 48 |       {
 49 |         id: 1,
 50 |         text: '杭州'
 51 |       },
 52 |       {
 53 |         id: 2,
 54 |         text: '温州'
 55 |       },
 56 |       {
 57 |         id: 3,
 58 |         text: '宁波',
 59 |         disabled: true
 60 |       },
 61 |       {
 62 |         id: 4,
 63 |         text: '义务'
 64 |       }
 65 |     ]
 66 |   },
 67 |   {
 68 |     text: '江苏',
 69 |     children: [
 70 |       {
 71 |         id: 11,
 72 |         text: '南京'
 73 |       },
 74 |       {
 75 |         id: 12,
 76 |         text: '无锡'
 77 |       },
 78 |       {
 79 |         id: 13,
 80 |         text: '徐州'
 81 |       },
 82 |       {
 83 |         id: 14,
 84 |         text: '苏州'
 85 |       }
 86 |     ]
 87 |   },
 88 |   {
 89 |     text: '福建',
 90 |     disabled: true
 91 |   }
 92 | ]
 93 | let items2 = [
 94 |   {
 95 |     text: '浙江',
 96 |     dot: true,
 97 |     children: [
 98 |       {
 99 |         id: 1,
100 |         text: '杭州'
101 |       },
102 |       {
103 |         id: 2,
104 |         text: '温州'
105 |       },
106 |       {
107 |         id: 3,
108 |         text: '宁波',
109 |         disabled: true
110 |       },
111 |       {
112 |         id: 4,
113 |         text: '义务'
114 |       }
115 |     ]
116 |   },
117 |   {
118 |     text: '江苏',
119 |     badge: 5,
120 |     children: [
121 |       {
122 |         id: 11,
123 |         text: '南京'
124 |       },
125 |       {
126 |         id: 12,
127 |         text: '无锡'
128 |       },
129 |       {
130 |         id: 13,
131 |         text: '徐州'
132 |       },
133 |       {
134 |         id: 14,
135 |         text: '苏州'
136 |       }
137 |     ]
138 |   },
139 |   {
140 |     text: '福建',
141 |     disabled: true
142 |   }
143 | ]
144 | 
145 | let clickNav = (val: any) => {
146 |   console.log(val)
147 | }
148 | let clickItem = (val: any) => {
149 |   console.log(val)
150 | }
151 | </script>
152 | 
153 | <style scoped lang="scss">
154 | .demo {
155 |   margin-bottom: 20px;
156 |   &-title {
157 |     padding: 10px;
158 |   }
159 | }
160 | </style>


--------------------------------------------------------------------------------
/src/views/openMore/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <cc-open-more>
 4 |       <div v-html="content"></div>
 5 |     </cc-open-more>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup lang="ts">
10 | let content = `我在年青时候也曾经做过许多梦，后来大半忘却了，但自己也并不以为可惜。所谓回忆者，虽说可以使人欢欣，有时也不免使人寂寞，使精神的丝缕还牵着己逝的寂寞的时光，又有什么意味呢，而我偏苦于不能全忘却，这不能全忘的一部分，到现在便成了《呐喊》的来由。
11 | 
12 | 　　我有四年多，曾经常常，——几乎是每天，出入于质铺和药店里，年纪可是忘却了，总之是药店的柜台正和我一样高，质铺的是比我高一倍，我从一倍高的柜台外送上衣服或首饰去，在侮蔑里接了钱，再到一样高的柜台上给我久病的父亲去买药。回家之后，又须忙别的事了，因为开方的医生是最有名的，以此所用的药引也奇特：冬天的芦根，经霜三年的甘蔗，蟋蟀要原对的，结子的平地木，……多不是容易办到的东西。然而我的父亲终于日重一日的亡故了。
13 | 
14 | 　　有谁从小康人家而坠入困顿的么，我以为在这途路中，大概可以看见世人的真面目；我要到N进K学堂去了①，仿佛是想走异路，逃异地，去寻求别样的人们。我的母亲没有法，办了八元的川资，说是由我的自便；然而伊哭了，这正是情理中的事，因为那时读书应试是正路，所谓学洋务，社会上便以为是一种走投无路的人，只得将灵魂卖给鬼子，要加倍的奚落而且排斥的，而况伊又看不见自己的儿子了。然而我也顾不得这些事，终于到N去进了K学堂了，在这学堂里，我才知道世上还有所谓格致，算学，地理，历史，绘图和体操。生理学并不教，但我们却看到些木版的《全体新论》和《化学卫生论》之类了。我还记得先前的医生的议论和方药，和现在所知道的比较起来，便渐渐的悟得中医不过是一种有意的或无意的骗子②，同时又很起了对于被骗的病人和他的家族的同情；而且从译出的历史上，又知道了日本维新是大半发端于西方医学的事实。
15 | 
16 | 　　因为这些幼稚的知识，后来便使我的学籍列在日本一个乡间的医学专门学校里了。我的梦很美满，预备卒业回来，救治象我父亲似的被误的病人的疾苦，战争时候便去当军医，一面又促进了国人对于维新的信仰。我已不知道教授微生物学的方法，现在又有了怎样的进步了，总之那时是用了电影，来显示微生物的形状的，因此有时讲义的一段落已完，而时间还没有到，教师便映些风景或时事的画片给学生看，以用去这多余的光阴。其时正当日俄战争的时候，关于战事的画片自然也就比较的多了，我在这一个讲堂中，便须常常随喜我那同学们的拍手和喝采。有一回，我竟在画片上忽然会见我久违的许多中国人了，一个绑在中间，许多站在左右，一样是强壮的体格，而显出麻木的神情。据解说，则绑着的是替俄国做了军事上的侦探，正要被日军砍下头颅来示众，而围着的便是来赏鉴这示众的盛举的人们。
17 | 
18 | 　　这一学年没有完毕，我已经到了东京了，因为从那一回以后，我便觉得医学并非一件紧要事，凡是愚弱的国民，即使体格如何健全，如何茁壮，也只能做毫无意义的示众的材料和看客，病死多少是不必以为不幸的。所以我们的第一要著，是在改变他们的精神，而善于改变精神的是，我那时以为当然要推文艺，于是想提倡文艺运动了。在东京的留学生很有学法政理化以至警察工业的，但没有人治文学和美术；可是在冷淡的空气中，也幸而寻到几个同志了，此外又邀集了必须的几个人，商量之后，第一步当然是出杂志，名目是取“新的生命”的意思，因为我们那时大抵带些复古的倾向，所以只谓之《新生》。
19 | 
20 | 　　《新生》的出版之期接近了，但最先就隐去了若干担当文字的人，接着又逃走了资本，结果只剩下不名一钱的三个人。创始时候既己背时，失败时候当然无可告语，而其后却连这三个人也都为各自的运命所驱策，不能在一处纵谈将来的好梦了，这就是我们的并未产生的《新生》的结局。
21 | 
22 | 　　我感到未尝经验的无聊，是自此以后的事。我当初是不知其所以然的；后来想，凡有一人的主张，得了赞和，是促其前进的，得了反对，是促其奋斗的，独有叫喊于生人中，而生人并无反应，既非赞同，也无反对，如置身毫无边际的荒原，无可措手的了，这是怎样的悲哀呵，我于是以我所感到者为寂寞。
23 | 
24 | 　　这寂寞又一天一天的长大起来，如大毒蛇，缠住了我的灵魂了。
25 | 
26 | 　　然而我虽然自有无端的悲哀，却也并不愤懑，因为这经验使我反省，看见自己了：就是我决不是一个振臂一呼应者云集的英雄。
27 | 
28 | 　　只是我自己的寂寞是不可不驱除的，因为这于我太痛苦。我于是用了种种法，来麻醉自己的灵魂，使我沉入于国民中，使我回到古代去，后来也亲历或旁观过几样更寂寞更悲哀的事，都为我所不愿追怀，甘心使他们和我的脑一同消灭在泥土里的，但我的麻醉法却也似乎已经奏了功，再没有青年时候的慷慨激昂的意思了。
29 | 
30 | 　　S会馆③里有三间屋，相传是往昔曾在院子里的槐树上缢死过一个女人的，现在槐树已经高不可攀了，而这屋还没有人住；许多年，我便寓在这屋里钞古碑④。客中少有人来，古碑中也遇不到什么问题和主义，而我的生命却居然暗暗的消去了，这也就是我惟一的愿望。夏夜，蚊子多了，便摇着蒲扇坐在槐树下，从密叶缝里看那一点一点的青天，晚出的槐蚕又每每冰冷的落在头颈上。
31 | 
32 | 　　那时偶或来谈的是一个老朋友金心异⑤，将手提的大皮夹放在破桌上，脱下长衫，对面坐下了，因为怕狗，似乎心房还在怦怦的跳动。
33 | 
34 | 　　“你钞了这些有什么用？”有一夜，他翻着我那古碑的钞本，发了研究的质问了。
35 | 
36 | 　　“没有什么用。”
37 | 
38 | 　　“那么，你钞他是什么意思呢？”
39 | 
40 | 　　“没有什么意思。”
41 | 
42 | 　　“我想，你可以做点文章……”
43 | 
44 | 　　我懂得他的意思了，他们正办《新青年》，然而那时仿佛不特没有人来赞同，并且也还没有人来反对，我想，他们许是感到寂寞了，但是说：
45 | 
46 | 　　“假如一间铁屋子，是绝无窗户而万难破毁的，里面有许多熟睡的人们，不久都要闷死了，然而是从昏睡入死灭，并不感到就死的悲哀。现在你大嚷起来，惊起了较为清醒的几个人，使这不幸的少数者来受无可挽救的临终的苦楚，你倒以为对得起他们么？”
47 | 
48 | 　　“然而几个人既然起来，你不能说决没有毁坏这铁屋的希望。”
49 | 
50 | 　　是的，我虽然自有我的确信，然而说到希望，却是不能抹杀的，因为希望是在于将来，决不能以我之必无的证明，来折服了他之所谓可有，于是我终于答应他也做文章了，这便是最初的一篇《狂人日记》。从此以后，便一发而不可收，每写些小说模样的文章，以敷衍朋友们的嘱托，积久了就有了十余篇。
51 | 
52 | 　　在我自己，本以为现在是已经并非一个切迫而不能已于言的人了，但或者也还未能忘怀于当日自己的寂寞的悲哀罢，所以有时候仍不免呐喊几声，聊以慰藉那在寂寞里奔驰的猛士，使他不惮于前驱。至于我的喊声是勇猛或是悲哀，是可憎或是可笑，那倒是不暇顾及的；但既然是呐喊，则当然须听将令的了，所以我往往不恤用了曲笔，在《药》的瑜儿的坟上平空添上一个花环，在《明天》里也不叙单四嫂子竟没有做到看见儿子的梦，因为那时的主将是不主张消极的。至于自己，却也并不愿将自以为苦的寂寞，再来传染给也如我那年青时候似的正做着好梦的青年。
53 | 
54 | 　　这样说来，我的小说和艺术的距离之远，也就可想而知了，然而到今日还能蒙着小说的名，甚而至于且有成集的机会，无论如何总不能不说是一件侥幸的事，但侥幸虽使我不安于心，而悬揣人间暂时还有读者，则究竟也仍然是高兴的。
55 | 
56 | 　　所以我竟将我的短篇小说结集起来，而且付印了，又因为上面所说的缘由，便称之为《呐喊》。
57 | 
58 | 　　　　　　　　　　　　　　　　　一九二二年十二月三日，鲁迅记于北京。`
59 | </script>
60 | 
61 | <style scoped lang="scss">
62 | </style>


--------------------------------------------------------------------------------
/src/views/layout/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="title">基础用法</div>
  4 |     <div class="demo">
  5 |       <cc-row>
  6 |         <cc-col span="8">span: 8</cc-col>
  7 |         <cc-col span="8">span: 8</cc-col>
  8 |         <cc-col span="8">span: 8</cc-col>
  9 |       </cc-row>
 10 |     </div>
 11 | 
 12 |     <div class="demo">
 13 |       <cc-row>
 14 |         <cc-col span="4">span: 4</cc-col>
 15 |         <cc-col span="10" offset="4">offset: 4, span: 10</cc-col>
 16 |       </cc-row>
 17 |     </div>
 18 | 
 19 |     <div class="demo">
 20 |       <cc-row>
 21 |         <cc-col offset="12" span="12">offset: 12, span: 12</cc-col>
 22 |       </cc-row>
 23 |     </div>
 24 |   </div>
 25 | 
 26 |   <div>
 27 |     <div class="title">列元素间距</div>
 28 |     <div class="demo">
 29 |       <cc-row gutter="20">
 30 |         <cc-col span="8">span: 8</cc-col>
 31 |         <cc-col span="8">span: 8</cc-col>
 32 |         <cc-col span="8">span: 8</cc-col>
 33 |       </cc-row>
 34 |     </div>
 35 |   </div>
 36 | 
 37 |   <div>
 38 |     <div class="title">flex布局</div>
 39 |     <div>左对齐</div>
 40 |     <div class="demo">
 41 |       <cc-row >
 42 |         <cc-col span="6">span: 6</cc-col>
 43 |         <cc-col span="6">span: 6</cc-col>
 44 |         <cc-col span="6">span: 6</cc-col>
 45 |       </cc-row>
 46 |     </div>
 47 | 
 48 |     <div>居中</div>
 49 |     <div class="demo">
 50 |       <cc-row  justify="center">
 51 |         <cc-col span="6">span: 6</cc-col>
 52 |         <cc-col span="6">span: 6</cc-col>
 53 |         <cc-col span="6">span: 6</cc-col>
 54 |       </cc-row>
 55 |     </div>
 56 | 
 57 |     <div>右对齐</div>
 58 |     <div class="demo">
 59 |       <cc-row  justify="end">
 60 |       <cc-col span="6">span: 6</cc-col>
 61 |       <cc-col span="6">span: 6</cc-col>
 62 |       <cc-col span="6">span: 6</cc-col>
 63 |     </cc-row>
 64 |     </div>
 65 | 
 66 |     <div>两端对齐</div>
 67 |     <div class="demo">
 68 |       <cc-row  justify="space-between">
 69 |         <cc-col span="6">span: 6</cc-col>
 70 |         <cc-col span="6">span: 6</cc-col>
 71 |         <cc-col span="6">span: 6</cc-col>
 72 |       </cc-row>
 73 |     </div>
 74 | 
 75 |     <div>每个元素的两侧间隔相等</div>
 76 |     <div class="demo">
 77 |       <cc-row  justify="space-around">
 78 |         <cc-col span="6">span: 6</cc-col>
 79 |         <cc-col span="6">span: 6</cc-col>
 80 |         <cc-col span="6">span: 6</cc-col>
 81 |       </cc-row>
 82 |     </div>
 83 |   </div>
 84 | 
 85 |   <div>
 86 |     <div class="title">自定义标签(ul、li为例)</div>
 87 |     <div class="demo">
 88 |       <cc-row tag='ul'>
 89 |         <cc-col tag='li' span="8">li标签</cc-col>
 90 |         <cc-col tag='li' span="8">li标签</cc-col>
 91 |         <cc-col tag='li' span="8">li标签</cc-col>
 92 |       </cc-row>
 93 |     </div>
 94 |   </div>
 95 | </template>
 96 | 
 97 | <script setup lang="ts">
 98 | 
 99 | </script>
100 | 
101 | <style scoped lang="scss">
102 | .title {
103 |   margin: #{topx(20)};
104 | }
105 | .demo {
106 |   width: 100%;
107 |   height: #{topx(40)};
108 |   margin: #{topx(10)} 0;
109 |   .cc-col {
110 |     margin-bottom: 10px;
111 |     color: #fff;
112 |     font-size: 13px;
113 |     line-height: 30px;
114 |     text-align: center;
115 |     background-clip: content-box;
116 |   }
117 |   .cc-col:nth-child(odd) {
118 |     background-color: #39a9ed;
119 |   }
120 |   .cc-col:nth-child(even) {
121 |     background-color: #66c6f2;
122 |   }
123 | }
124 | </style>


--------------------------------------------------------------------------------
/src/components/cc-verify-button/cc-verify-button.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <cc-button 
  3 |   @click="clickButton" 
  4 |   :disabled="disabled"
  5 |   :type='type'
  6 |   :plain='plain'
  7 |   :round='round'
  8 |   :block='block'
  9 |   :size='size'
 10 |   :loading='loading'
 11 |   :icon='icon'
 12 |   :color='color'
 13 |   :customStyle='customStyle'
 14 |   :hoverClass='hoverClass'
 15 |   >
 16 |   <span>{{ cloneText }}</span>
 17 |   </cc-button>
 18 | </template>
 19 | 
 20 | <script setup lang="ts">
 21 | import { defineProps, defineEmits, ref, onUnmounted, PropType, watch, computed } from 'vue'
 22 | 
 23 | type ButtonTypeProps = '' | 'primary' | 'success' | 'error' | 'warning' | 'info'
 24 | type ButtonSizeProps = '' | 'large' | 'small' | 'mini'
 25 | 
 26 | 
 27 | let props = defineProps({
 28 |   // 按钮文字
 29 |   text: {
 30 |     type: String,
 31 |     default: '发送'
 32 |   },
 33 |   // 结束文字
 34 |   endText: {
 35 |     type: String,
 36 |     default: '重新发送'
 37 |   },
 38 |   // 倒计时过程的文字
 39 |   countDownText: {
 40 |     type: String,
 41 |     default: '秒后重新发送'
 42 |   },
 43 |   // 倒计时事件
 44 |   countDown: {
 45 |     type: [String, Number],
 46 |     default: 60
 47 |   },
 48 |   // 是否自定义文字
 49 |   customText: {
 50 |     type: String,
 51 |     default: ''
 52 |   },
 53 |   // 按钮类型
 54 |   type: {
 55 |     type: String as PropType<ButtonTypeProps>,
 56 |     default: ''
 57 |   },
 58 |   // 是否是朴素按钮
 59 |   plain: {
 60 |     type: Boolean,
 61 |     default: false
 62 |   },
 63 |   // 圆形按钮
 64 |   round: {
 65 |     type: Boolean,
 66 |     default: false
 67 |   },
 68 |   // 块级按钮
 69 |   block: {
 70 |     type: Boolean,
 71 |     default: false
 72 |   },
 73 |   // 禁用状态
 74 |   disabled: {
 75 |     type: Boolean,
 76 |     default: false
 77 |   },
 78 |   // 尺寸
 79 |   size: {
 80 |     type: String as PropType<ButtonSizeProps>,
 81 |     default: ''
 82 |   },
 83 |   loading: {
 84 |     type: Boolean,
 85 |     default: false
 86 |   },
 87 |   // 图标 和uni-icon一致
 88 |   icon: {
 89 |     type: String,
 90 |   },
 91 |   // 自定义颜色
 92 |   color: {
 93 |     type: String,
 94 |     default: ''
 95 |   },
 96 |   // 自定义样式
 97 |   customStyle: {
 98 |     type: Object
 99 |   },
100 |   // 按钮点击时的样式
101 |   hoverClass: {
102 |     type: String,
103 |   }
104 | })
105 | let emits = defineEmits(['start', 'end', 'change'])
106 | 
107 | let disabled = ref<boolean>(false)
108 | let time = ref<number>(Number(props.countDown))
109 | let cloneText = ref<string>(props.text)
110 | let cloneCountDownText= computed(() => `${time.value}${props.countDownText}`)
111 | let num = ref<number>(0)
112 | 
113 | let timer = ref()
114 | let clickButton = () => {
115 |   if (!props.customText) time.value += 1
116 |   emits('start')
117 |   timer.value = setInterval(() => {
118 |     time.value--
119 |     disabled.value = true
120 |     cloneText.value = props.customText ? props.customText : cloneCountDownText.value
121 |     if (time.value === 0) {
122 |       emits('end')
123 |       disabled.value = false
124 |       cloneText.value = props.endText
125 |       time.value = Number(props.countDown)
126 |       clearInterval(timer.value)
127 |     }
128 |   }, 1000)
129 | }
130 | watch(() => time.value, val => {
131 |   num.value ++
132 |   if (val <= props.countDown && num.value > 1) emits('change', val)
133 | }, {immediate: true})
134 | 
135 | onUnmounted(() => {
136 |   clearInterval(timer.value)
137 | })
138 | </script>
139 | 
140 | <style scoped lang="scss">
141 | .cc-verify-button {
142 | }
143 | </style>


--------------------------------------------------------------------------------
/src/components/cc-submit-bar/cc-submit-bar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="tip" v-if="$slots.tip">
  4 |       <slot name="tip"></slot>
  5 |     </div>
  6 |     <div class="container flex a-center">
  7 |       <slot></slot>
  8 |       <div class="flex j-end a-center f-1">
  9 |         <div class="label">{{ label }}:</div>
 10 |         <div class="price flex a-center">
 11 |           <div class="currency">{{ currency }}</div>
 12 |           <div class="leftPrice">{{ leftPrice }}</div>
 13 |           <div class="rightPrice">.{{ rightPrice }}</div>
 14 |         </div>
 15 |         <div>
 16 |           <cc-button
 17 |             :loading="loading"
 18 |             :disabled='disabled'
 19 |             :color="buttonColor"
 20 |             round
 21 |             @click="submit"
 22 |           >
 23 |             {{ buttonText }}
 24 |           </cc-button>
 25 |         </div>
 26 |       </div>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script setup lang="ts">
 32 | import { defineProps, defineEmits, ref, onMounted } from 'vue'
 33 | 
 34 | let props = defineProps({
 35 |   // 价钱
 36 |   price: {
 37 |     type: Number,
 38 |     required: true
 39 |   },
 40 |   // 左侧文案
 41 |   label: {
 42 |     type: String,
 43 |     default: '合计'
 44 |   },
 45 |   // 按钮文字
 46 |   buttonText: {
 47 |     type: String,
 48 |     default: '提交订单'
 49 |   },
 50 |   // 按钮颜色
 51 |   buttonColor: {
 52 |     type: String,
 53 |     default: '#ee0a24'
 54 |   },
 55 |   // 货币符号
 56 |   currency: {
 57 |     type: String,
 58 |     default: '¥'
 59 |   },
 60 |   // 价格小数点后位数
 61 |   decimalLength: {
 62 |     type: [String, Number],
 63 |     default: '2'
 64 |   },
 65 |   // 是否禁用按钮
 66 |   disabled: {
 67 |     type: Boolean,
 68 |     default: false
 69 |   },
 70 |   // 是否显示加载中的按钮
 71 |   loading: {
 72 |     type: Boolean,
 73 |     default: false
 74 |   }
 75 | })
 76 | let emits = defineEmits(['submit'])
 77 | 
 78 | 
 79 | let leftPrice = ref<number>(0)
 80 | let rightPrice = ref<string>('')
 81 | 
 82 | let submit = () => {
 83 |   if (!props.disabled && !props.loading) {
 84 |     emits('submit')
 85 |   }
 86 | }
 87 | onMounted(() => {
 88 |   leftPrice.value = Math.floor(props.price / 100)
 89 |   rightPrice.value = String((props.price / 100).toFixed(props.decimalLength as number)).split('.')[1]
 90 | })
 91 | </script>
 92 | 
 93 | <style scoped lang="scss">
 94 | .w100 {
 95 |   width: 100%;
 96 | }
 97 | .f-1 {
 98 |   flex: 1;
 99 | }
100 | .flex {
101 |   display: flex;
102 | }
103 | .a-center {
104 |   align-items: center;
105 | }
106 | .j-center {
107 |   justify-content: center;
108 | }
109 | .j-between {
110 |   justify-content: space-between;
111 | }
112 | .j-end {
113 |   justify-content: flex-end;
114 | }
115 | .container {
116 |   height: 50px;
117 |   padding: 0 16px;
118 |   font-size: 14px;
119 |   position: relative;
120 |   .price {
121 |     margin: 0 5px;
122 |     color: #ee0a24;
123 |     .currency {
124 |       font-size: 12px;
125 |       position: relative;
126 |       top: 1px;
127 |     }
128 |     .leftPrice {
129 |       font-size: 20px;
130 |       font-weight: 500;
131 |     }
132 |     .rightPrice {
133 |       font-size: 12px;
134 |       position: relative;
135 |       top: 1px;
136 |     }
137 |   }
138 | }
139 | .tip {
140 |   padding: 8px 12px;
141 |   color: #f56723;
142 |   font-size: 12px;
143 |   line-height: 1.5;
144 |   background-color: #fff7cc;
145 | }
146 | .disable {
147 |   cursor: not-allowed;
148 |   opacity: 0.5;
149 | }
150 | </style>


--------------------------------------------------------------------------------
/src/components/cc-grid/cc-grid.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-grid" :style="{ paddingLeft: gutter + 'px' }">
  3 |     <slot v-if="$slots.default"></slot>
  4 |     <template v-else>
  5 |       <div
  6 |         class="cc-grid-item"
  7 |         v-for="(item, index) in list"
  8 |         @click="clickItem(item, index)"
  9 |         :key="index"
 10 |         :style="{
 11 |           flexBasis: basis,
 12 |           paddingRight: gutter + 'px',
 13 |           marginBottom: gutter + 'px'
 14 |         }"
 15 |       >
 16 |         <div>
 17 |           <slot v-if="$slots.default"></slot>
 18 |           <div v-else :style="{ flexDirection: vertical ? 'row' : 'column' }" class="cc-grid-item-content">
 19 |             <div class="cc-grid-item-icon">
 20 |               <cc-badge :dot="item.dot" :content="item.badge" v-if="item.dot || item.badge">
 21 |                 <cc-icon :type="item.icon" :color="item.iconColor" :size="item.iconSize"></cc-icon>
 22 |               </cc-badge>
 23 |               <cc-icon v-if="!item.dot && !item.badge" :type="item.icon" :color="item.iconColor" :size="item.iconSize"></cc-icon>
 24 |             </div>
 25 |             <div class="cc-grid-item-text" :class="{ 'cc-grid-item-content': vertical }" :style="{ fontSize: item.textSize + 'px', color: item.textColor }">{{ item.text }}</div>
 26 |           </div>
 27 |         </div>
 28 |         <div class="cc-grid-item-border-right" v-if="!gutter"></div>
 29 |         <div class="cc-grid-item-border-bottom" v-if="!gutter"></div>
 30 |       </div>
 31 |     </template>
 32 |   </div>
 33 | </template>
 34 | 
 35 | <script setup lang='ts'>
 36 | import {defineProps, defineEmits, PropType, computed} from 'vue'
 37 | 
 38 | export interface GridItem {
 39 |   text?: string,
 40 |   icon?: string,
 41 |   textColor?: string,
 42 |   iconColor?: string,
 43 |   textSize?: string,
 44 |   dot?: boolean,
 45 |   badge?: number | string
 46 | }
 47 | 
 48 | let props = defineProps({
 49 |     // 宫格数据
 50 |     list: {
 51 |       type: Array as PropType<GridItem[]>,
 52 |     },
 53 |     // 列数
 54 |     column: {
 55 |       type: Number,
 56 |       default: 4
 57 |     },
 58 |     // 间距
 59 |     gutter: {
 60 |       type: [Number, String],
 61 |       default: 0
 62 |     },
 63 |     // 内容是否横向排列
 64 |     vertical: {
 65 |       type: Boolean,
 66 |       default: false
 67 |     }
 68 | })
 69 | let emits = defineEmits(['clickItem'])
 70 | 
 71 | let clickItem = (item: GridItem, index: number) => {
 72 |   emits('clickItem', {
 73 |     item, 
 74 |     index
 75 |   })
 76 | }
 77 | let basis = computed(() => 100 / props.column + '%')
 78 | </script>
 79 | 
 80 | <style scoped lang="scss">
 81 | .cc-grid {
 82 |   display: flex;
 83 |   align-items: center;
 84 |   flex-wrap: wrap;
 85 |   width: 100%;
 86 |   .cc-grid-item {
 87 |     box-sizing: border-box;
 88 |     position: relative;
 89 |     &-content {
 90 |       padding: #{topx(16)} #{topx(8)};
 91 |       display: flex;
 92 |       align-items: center;
 93 |       justify-content: center;
 94 |       background-color: #fff;
 95 |     }
 96 |     &-content-row {
 97 |       margin-left: #{topx(8)};
 98 |     }
 99 |     &-border-right {
100 |       position: absolute;
101 |       height: 100%;
102 |       width: #{topx(1)};
103 |       background: #ebedf0;
104 |       right: 0;
105 |       top: 0;
106 |       bottom: 0;
107 |     }
108 |     &-border-bottom {
109 |       position: absolute;
110 |       height: #{topx(1)};
111 |       width: 100%;
112 |       background: #ebedf0;
113 |       bottom: 0;
114 |     }
115 |   }
116 | }
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/views/steps/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="demo">
  4 |       <div class="demo-title">基础用法</div>
  5 |       <div class="demo-item">
  6 |         <cc-steps :list="list1" :active="active"></cc-steps>
  7 |       </div>
  8 |     </div>
  9 | 
 10 |     <div class="demo">
 11 |       <div class="demo-title">展示点</div>
 12 |       <div class="demo-item">
 13 |         <cc-steps :list="list1" dot :active="active"></cc-steps>
 14 |       </div>
 15 |     </div>
 16 | 
 17 |     <div class="demo">
 18 |       <div class="demo-title">自定义图标</div>
 19 |       <div class="demo-item">
 20 |         <cc-steps :list="list2" :active="active"></cc-steps>
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <div class="demo">
 25 |       <div class="demo-title">自定义颜色</div>
 26 |       <div class="demo-item">
 27 |         <cc-steps :list="list3" :active="active"></cc-steps>
 28 |       </div>
 29 |     </div>
 30 | 
 31 |     <div class="demo">
 32 |       <div class="demo-title">描述信息</div>
 33 |       <div class="demo-item">
 34 |         <cc-steps :list="list4" :active="active"></cc-steps>
 35 |       </div>
 36 |     </div>
 37 | 
 38 |     <div class="demo">
 39 |       <div class="demo-title">竖向</div>
 40 |       <div class="demo-item">
 41 |         <cc-steps :list="list4" :active="active" vertical></cc-steps>
 42 |       </div>
 43 |     </div>
 44 | 
 45 |     <div class="demo-btn">
 46 |       <div class="demo-btn-item" @click="pre">
 47 |         <cc-button round type="primary" size="small">上一步</cc-button>
 48 |       </div>
 49 |       <div class="demo-btn-item" @click="next">
 50 |         <cc-button round type="error" size="small">下一步</cc-button>
 51 |       </div>
 52 |     </div>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script setup lang="ts">
 57 | import { ref } from 'vue'
 58 | let active = ref<number>(0)
 59 | let list1 = [
 60 |   {
 61 |     name: '下单'
 62 |   },
 63 |   {
 64 |     name: '出库'
 65 |   },
 66 |   {
 67 |     name: '运输'
 68 |   },
 69 |   {
 70 |     name: '签收'
 71 |   }
 72 | ]
 73 | let list2 = [
 74 |   {
 75 |     name: '下单',
 76 |     icon: 'chat'
 77 |   },
 78 |   {
 79 |     name: '出库',
 80 |     icon: 'search'
 81 |   },
 82 |   {
 83 |     name: '运输',
 84 |     icon: 'person'
 85 |   },
 86 |   {
 87 |     name: '签收',
 88 |     icon: 'heart'
 89 |   }
 90 | ]
 91 | let list3 = [
 92 |   {
 93 |     name: '下单',
 94 |     activeColor: '#fa2c19'
 95 |   },
 96 |   {
 97 |     name: '出库',
 98 |     activeColor: '#fa2c19'
 99 |   },
100 |   {
101 |     name: '运输',
102 |     activeColor: '#fa2c19'
103 |   },
104 |   {
105 |     name: '签收',
106 |     activeColor: '#fa2c19'
107 |   }
108 | ]
109 | let list4 = [
110 |   {
111 |     name: '下单',
112 |     content: '描述信息'
113 |   },
114 |   {
115 |     name: '出库',
116 |     content: '描述信息'
117 |   },
118 |   {
119 |     name: '运输',
120 |     content: '描述信息'
121 |   },
122 |   {
123 |     name: '签收',
124 |     content: '描述信息'
125 |   }
126 | ]
127 | 
128 | let pre = () => {
129 |   active.value--
130 |   if (active.value === 0) active.value = 0
131 | }
132 | let next = () => {
133 |   active.value++
134 |   if (active.value === 3) active.value = 3
135 | }
136 | </script>
137 | 
138 | <style scoped lang="scss">
139 | .demo {
140 |   margin-bottom: 20px;
141 |   &-title {
142 |     padding: 10px;
143 |   }
144 |   &-item {
145 |     margin-left: 2px;
146 |     view {
147 |       margin-left: 15px;
148 |     }
149 |   }
150 |   &-btn {
151 |     display: flex;
152 |     align-items: center;
153 |     &-item {
154 |       flex: 1;
155 |       display: flex;
156 |       align-items: center;
157 |       justify-content: center;
158 |     }
159 |   }
160 | }
161 | </style>


--------------------------------------------------------------------------------
/src/components/cc-area/cc-area.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-area">
  3 |     <div class="cc-area-btn">
  4 |       <div class="cc-area-btn-cancel">{{ cancelText }}</div>
  5 |       <div class="cc-area-btn-title">{{ title }}</div>
  6 |       <div class="cc-area-btn-confirm">{{ confirmText }}</div>
  7 |     </div>
  8 |     <div class="cc-area-content">
  9 |       <div class="cc-area-content-column">
 10 |         <div
 11 |           class="cc-area-content-column-wrap"
 12 |           :style="{ transform: `translateY(${translateY}px)` }"
 13 |         >
 14 |           <div class="cc-area-content-column-item" v-for="(item, index) in regionList" :key="index">
 15 |             <div class="cc-area-content-column-item-name">{{ item.name }}</div>
 16 |           </div>
 17 |         </div>
 18 |       </div>
 19 |       <div class="cc-area-content-column">
 20 |         <div
 21 |           class="cc-area-content-column-wrap"
 22 |           :style="{ transform: `translateY(${translateY}px)` }"
 23 |         >
 24 |           <div class="cc-area-content-column-item" v-for="(item, index) in regionList" :key="index">
 25 |             <div class="cc-area-content-column-item-name">{{ item.name }}</div>
 26 |           </div>
 27 |         </div>
 28 |       </div>
 29 |       <div class="cc-area-content-column">
 30 |         <div
 31 |           class="cc-area-content-column-wrap"
 32 |           :style="{ transform: `translateY(${translateY}px)` }"
 33 |         >
 34 |           <div class="cc-area-content-column-item" v-for="(item, index) in regionList" :key="index">
 35 |             <div class="cc-area-content-column-item-name">{{ item.name }}</div>
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 |     </div>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script setup lang="ts">
 44 | import { defineProps, onMounted, ref } from 'vue'
 45 | import area, { AreaItem } from './area'
 46 | import cloneDeep from 'lodash/cloneDeep'
 47 | 
 48 | 
 49 | let props = defineProps({
 50 |   title: {
 51 |     type: String,
 52 |     default: '标题'
 53 |   },
 54 |   cancelText: {
 55 |     type: String,
 56 |     default: '取消'
 57 |   },
 58 |   confirmText: {
 59 |     type: String,
 60 |     default: '确认'
 61 |   },
 62 |   // 显示列数，3-省市区，2-省市，1-省
 63 |   columnsNum: {
 64 |     type: Number,
 65 |     default: 3
 66 |   },
 67 |   // 列占位提示文字
 68 |   columnsPlaceholder: {
 69 |     type: Array,
 70 |     default: () => []
 71 |   }
 72 | })
 73 | 
 74 | let regionList = ref<AreaItem[]>([])
 75 | 
 76 | let translateY = ref<number>(110)
 77 | 
 78 | onMounted(() => {
 79 |   regionList.value = cloneDeep(area)
 80 | })
 81 | </script>
 82 | 
 83 | <style scoped lang="scss">
 84 | .cc-area {
 85 |   position: relative;
 86 |   &-btn {
 87 |     display: flex;
 88 |     align-items: center;
 89 |     justify-content: space-between;
 90 |     height: 44px;
 91 |     padding: 0 16px;
 92 |     &-title {
 93 |       font-weight: 500;
 94 |     }
 95 |     &-cancel {
 96 |       font-size: 14px;
 97 |       color: #969799;
 98 |     }
 99 |     &-confirm {
100 |       font-size: 14px;
101 |       color: #576b95;
102 |     }
103 |   }
104 |   &-content {
105 |     position: relative;
106 |     display: flex;
107 |     height: 300px;
108 |     &-column {
109 |       flex: 1;
110 |       overflow: hidden;
111 |       &-item {
112 |         height: 44px;
113 |         display: flex;
114 |         align-items: center;
115 |         justify-content: center;
116 |         padding: 0 4px;
117 |         &-name {
118 |           overflow: hidden;
119 |           white-space: nowrap;
120 |           text-overflow: ellipsis;
121 |         }
122 |       }
123 |     }
124 |   }
125 | }
126 | </style>


--------------------------------------------------------------------------------
/src/views/tag/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div>
  4 |       <div class="title">基础语法</div>
  5 |       <div class="content">
  6 |         <div>
  7 |           <cc-tag @click="onClick">标签</cc-tag>
  8 |         </div>
  9 |         <div>
 10 |           <cc-tag type="success">标签</cc-tag>
 11 |         </div>
 12 |         <div>
 13 |           <cc-tag type="warning">标签</cc-tag>
 14 |         </div>
 15 |         <div>
 16 |           <cc-tag type="info">标签</cc-tag>
 17 |         </div>
 18 |         <div>
 19 |           <cc-tag type="error">标签</cc-tag>
 20 |         </div>
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <div>
 25 |       <div class="title">空心样式</div>
 26 |       <div class="content">
 27 |         <div>
 28 |           <cc-tag plain>标签</cc-tag>
 29 |         </div>
 30 |         <div>
 31 |           <cc-tag type="success" plain>标签</cc-tag>
 32 |         </div>
 33 |         <div>
 34 |           <cc-tag type="warning" plain>标签</cc-tag>
 35 |         </div>
 36 |         <div>
 37 |           <cc-tag type="info" plain>标签</cc-tag>
 38 |         </div>
 39 |         <div>
 40 |           <cc-tag type="error" plain>标签</cc-tag>
 41 |         </div>
 42 |       </div>
 43 |     </div>
 44 | 
 45 |     <div>
 46 |       <div class="title">圆角样式</div>
 47 |       <div class="content">
 48 |         <div>
 49 |           <cc-tag round>标签</cc-tag>
 50 |         </div>
 51 |         <div>
 52 |           <cc-tag type="success" round>标签</cc-tag>
 53 |         </div>
 54 |         <div>
 55 |           <cc-tag type="warning" round>标签</cc-tag>
 56 |         </div>
 57 |         <div>
 58 |           <cc-tag type="info" round>标签</cc-tag>
 59 |         </div>
 60 |         <div>
 61 |           <cc-tag type="error" round>标签</cc-tag>
 62 |         </div>
 63 |         <div>
 64 |           <cc-tag type="primary" circleLeft>标签</cc-tag>
 65 |         </div>
 66 |         <div>
 67 |           <cc-tag type="error" circleRight>标签</cc-tag>
 68 |         </div>
 69 |       </div>
 70 |     </div>
 71 | 
 72 |     <div>
 73 |       <div class="title">标签尺寸</div>
 74 |       <div class="content">
 75 |         <div>
 76 |           <cc-tag>普通标签</cc-tag>
 77 |         </div>
 78 |         <div>
 79 |           <cc-tag size="medium">中号标签</cc-tag>
 80 |         </div>
 81 |         <div>
 82 |           <cc-tag type="success" size="large">大号标签</cc-tag>
 83 |         </div>
 84 |       </div>
 85 |     </div>
 86 | 
 87 |     <div>
 88 |       <div class="title">自定义颜色</div>
 89 |       <div class="content">
 90 |         <div>
 91 |           <cc-tag color="#7232dd">标签</cc-tag>
 92 |         </div>
 93 |         <div>
 94 |           <cc-tag color="#7232dd" plain>标签</cc-tag>
 95 |         </div>
 96 |         <div>
 97 |           <cc-tag color="#ffe1e1" text-color="#ad0000">标签</cc-tag>
 98 |         </div>
 99 |       </div>
100 |     </div>
101 | 
102 |     <div>
103 |       <div class="title">可关闭</div>
104 |       <div class="content">
105 |         <div>
106 |           <cc-tag closeable @close="onClick">标签</cc-tag>
107 |         </div>
108 |         <div>
109 |           <cc-tag closeable type="success">标签</cc-tag>
110 |         </div>
111 |         <div>
112 |           <cc-tag closeable plain>标签</cc-tag>
113 |         </div>
114 |       </div>
115 |     </div>
116 |   </div>
117 | </template>
118 | 
119 | <script setup lang="ts">
120 | let onClick = () => {
121 |   console.log(111)
122 | }
123 | </script>
124 | 
125 | <style lang="scss" scoped>
126 | .title {
127 |   margin: #{topx(10)};
128 | }
129 | .content {
130 |   margin: #{topx(10)};
131 |   display: flex;
132 |   align-items: center;
133 |   flex-wrap: wrap;
134 |   div {
135 |     margin: #{topx(5)};
136 |   }
137 | }
138 | </style>


--------------------------------------------------------------------------------
/src/views/dropdown/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="padding: 30px 0">
  3 |     <div class="demo">
  4 |       <div class="demo-title">基础用法</div>
  5 |       <div>当前选中值: {{ value }}</div>
  6 |       <div class="demo-item">
  7 |         <cc-dropdown :list="list1" @change="onChange" @open="open" @close="close"></cc-dropdown>
  8 |       </div>
  9 |     </div>
 10 |     <div class="demo">
 11 |       <div class="demo-title">禁用状态</div>
 12 |       <div class="demo-item">
 13 |         <cc-dropdown :list="list1" disabled></cc-dropdown>
 14 |       </div>
 15 |     </div>
 16 | 
 17 |     <div class="demo">
 18 |       <div class="demo-title">自定义选中颜色</div>
 19 |       <div class="demo-item">
 20 |         <cc-dropdown :list="list3" activeColor="#0081ff"></cc-dropdown>
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <div class="demo">
 25 |       <div class="demo-title">自定义菜单内容</div>
 26 |       <div class="demo-item">
 27 |         <cc-dropdown :list="list4" activeColor="#0081ff">
 28 |          <template #choose>
 29 |           <cc-cell center title="包邮">
 30 |             <template #right-icon>
 31 |               <cc-switch v-model:value="switch1" size="24" active-color="#ee0a24" />
 32 |             </template>
 33 |           </cc-cell>
 34 |           <cc-cell center title="团购">
 35 |             <template #right-icon>
 36 |               <cc-switch v-model:value="switch2" size="24" active-color="#ee0a24" />
 37 |             </template>
 38 |           </cc-cell>
 39 |           <div style="padding: 5px 16px;">
 40 |             <cc-button type="pimary" block round>确认</cc-button>
 41 |           </div>
 42 |          </template>
 43 |         </cc-dropdown>
 44 |       </div>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script setup lang="ts">
 50 | import { DropdownItem } from '@/components/cc-dropdown/cc-dropdown.vue'
 51 | import { ref } from 'vue'
 52 | 
 53 | let list1 = ref<DropdownItem[]>([
 54 |   {
 55 |     value: 1,
 56 |     options: [
 57 |       { label: '全部商品', value: 0 },
 58 |       { label: '新款商品', value: 1 },
 59 |       { label: '活动商品', value: 2 },
 60 |     ]
 61 |   },
 62 |   {
 63 |     value: 'a',
 64 |     options: [
 65 |       { label: '默认排序', value: 'a' },
 66 |       { label: '好评排序', value: 'b' },
 67 |       { label: '销量排序', value: 'c', disabled: true }
 68 |     ]
 69 |   }
 70 | ])
 71 | let list2 = ref<DropdownItem[]>([
 72 |   {
 73 |     value: 'a',
 74 |     options: [
 75 |       { label: '默认排序', value: 'a' },
 76 |       { label: '好评排序', value: 'b' },
 77 |       { label: '销量排序', value: 'c', disabled: true }
 78 |     ]
 79 |   }
 80 | ])
 81 | let list3 = ref<DropdownItem[]>([
 82 |   {
 83 |     value: 1,
 84 |     options: [
 85 |       { label: '全部商品', value: 0 },
 86 |       { label: '新款商品', value: 1 },
 87 |       { label: '活动商品', value: 2 },
 88 |     ]
 89 |   }
 90 | ])
 91 | let list4 = ref<DropdownItem[]>([
 92 |   {
 93 |     value: 1,
 94 |     options: [
 95 |       { label: '全部商品', value: 0 },
 96 |       { label: '新款商品', value: 1 },
 97 |       { label: '活动商品', value: 2 },
 98 |     ]
 99 |   },
100 |   {
101 |     slots: 'choose',
102 |     title: '筛选'
103 |   }
104 | ])
105 | 
106 | 
107 | 
108 | let switch1 = ref<boolean>(false)
109 | let switch2 = ref<boolean>(false)
110 | 
111 | let value = ref<any>([])
112 | 
113 | let onChange = (val: any) => {
114 |   value.value = val
115 | }
116 | let open = () => {
117 |   console.log('open')
118 | }
119 | let close = (val: any) => {
120 |   console.log('close')
121 | }
122 | </script>
123 | 
124 | <style scoped lang="scss">
125 | .demo {
126 |   margin-bottom: #{topx(100)};
127 |   &-title {
128 |     padding: #{topx(10)};
129 |   }
130 |   &-item {
131 |     margin-bottom: 10px;
132 |   }
133 | }
134 | </style>


--------------------------------------------------------------------------------
/src/components/cc-sidebar/cc-sidebar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-sidebar" :style="{ width: width + 'px' }">
  3 |     <div
  4 |       class="cc-sidebar-item"
  5 |       v-for="(item, index) in list"
  6 |       :key="index"
  7 |       :style="{
  8 |         background: active === index ? item.bgColor ? item.bgColor : '#fff' : '#f7f8fa',
  9 |         fontSize: item.fontSize ? item.fontSize : 14 + 'px'
 10 |       }"
 11 |       @click="clickItem(item, index)"
 12 |     >
 13 |       <cc-badge :dot="item.dot" :content="item.badge" v-if="item.dot || item.badge">
 14 |         <div class="cc-sidebar-item-title">{{ item.title }}</div>
 15 |       </cc-badge>
 16 |       <div
 17 |         v-else
 18 |         class="cc-sidebar-item-title"
 19 |         :class="{'cc-sidebar-item-weight': active === index,  disabled: item.disabled}"
 20 |         :style="{ color: active === index ? item.activeColor ? item.activeColor : '#323233' :  item.textColor ? item.textColor : '#323233' }"
 21 |       >{{ item.title }}</div>
 22 |       <div 
 23 |       class="cc-sidebar-item-active"
 24 |       :style="{
 25 |         background: item.lineColor ? item.lineColor : '#ee0a24',
 26 |         width: item.lineWidth ? item.lineWidth + 'px' : '4px',
 27 |         height: item.lineHeight ? item.lineHeight + 'px': '16px',
 28 |         }"
 29 |        v-if="showLine && index === active"></div>
 30 |     </div>
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script setup lang="ts">
 35 | import { ref, defineProps, defineEmits, PropType } from 'vue'
 36 | 
 37 | export interface SidebarItem {
 38 |   // 标题
 39 |   title: string,
 40 |   // 是否显示圆点
 41 |   dot?: boolean,
 42 |   // 徽标内容
 43 |   badge?: string | number,
 44 |   // 是否禁用
 45 |   disabled?: boolean,
 46 |   bgColor?: string,
 47 |   activeColor?: string,
 48 |   fontSize?: string | number,
 49 |   // 文字颜色
 50 |   textColor?: string,
 51 |   // 文字选中颜色
 52 |   activeTextColor?: string,
 53 |   // 左侧线条颜色
 54 |   lineColor?: string,
 55 |   // 左侧线条宽度
 56 |   lineWidth?: string | number,
 57 |   // 左侧线条高度
 58 |   lineHeight?: string | number,
 59 | }
 60 | 
 61 | let props = defineProps({
 62 |   // 当前选中项
 63 |   current: {
 64 |     type: [Number, String],
 65 |     default: 0
 66 |   },
 67 |   // 侧边栏数据
 68 |   list: {
 69 |     type: Array as PropType<SidebarItem[]>,
 70 |     required: true
 71 |   },
 72 |   // 侧边栏宽度
 73 |   width: {
 74 |     type: [Number, String],
 75 |     default: 80
 76 |   },
 77 |   // 显示左侧线条
 78 |   showLine: {
 79 |     type: Boolean,
 80 |     default: true
 81 |   }
 82 | })
 83 | let emits = defineEmits(['change'])
 84 | let active = ref<number>(0)
 85 | if (typeof props.current === 'number') {
 86 |   active.value = props.current
 87 | } else {
 88 |   active.value = props.list.findIndex((item, index) => item.title === props.current || index === Number(props.current))
 89 | }
 90 | 
 91 | 
 92 | let clickItem = (item: SidebarItem, index: number) => {
 93 |   active.value = index
 94 |   emits('change', {
 95 |     item,
 96 |     index
 97 |   })
 98 | }
 99 | 
100 | 
101 | </script>
102 | 
103 | <style lang="scss" scoped>
104 | .cc-sidebar {
105 |   display: flex;
106 |   flex-direction: column;
107 |   &-item {
108 |     position: relative;
109 |     padding: #{topx(20)} #{topx(20)};
110 |     overflow: hidden;
111 |     display: flex;
112 |     justify-content: center;
113 |     align-items: center;
114 |     cursor: pointer;
115 |     user-select: none;
116 |     &-active {
117 |       position: absolute;
118 |       top: 50%;
119 |       left: 0;
120 |       transform: translateY(-50%);
121 |     }
122 |     &-weight {
123 |       font-weight: 500;
124 |     }
125 |   }
126 | }
127 | .disabled {
128 |   color: #c8c9cc !important;
129 |   cursor: not-allowed;
130 |   pointer-events: none;
131 | }
132 | </style>


--------------------------------------------------------------------------------
/src/views/countup/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div>
  4 |       <div class="title">基础用法</div>
  5 |       <div class="item">
  6 |         <cc-countup :end='end' :startVal="0" :endVal="1000"></cc-countup>
  7 |       </div>
  8 |       <div class="item">
  9 |         <cc-countup :startVal="100" :endVal="500"></cc-countup>
 10 |       </div>
 11 |     </div>
 12 | 
 13 |     <div>
 14 |       <div class="title">千分位分隔符</div>
 15 |       <div class="item">
 16 |         <cc-countup :startVal="0" :endVal="3000"></cc-countup>
 17 |       </div>
 18 |       <div class="item">
 19 |         <cc-countup :startVal="0" :endVal="3000" separator="."></cc-countup>
 20 |       </div>
 21 |       <div class="item">
 22 |         <cc-countup :startVal="0" :useGrouping="false" :endVal="3000"></cc-countup>
 23 |       </div>
 24 |     </div>
 25 | 
 26 |     <div>
 27 |       <div class="title">小数位和分割符号</div>
 28 |       <div class="item">
 29 |         <cc-countup :decimalPlaces="2" :startVal="0" :endVal="3000.55"></cc-countup>
 30 |       </div>
 31 |       <div class="item">
 32 |         <cc-countup :decimalPlaces="5" :startVal="0" :endVal="3000.55"></cc-countup>
 33 |       </div>
 34 |       <div class="item">
 35 |         <cc-countup :startVal="0" :decimalPlaces="2" decimal="," :endVal="3000.55"></cc-countup>
 36 |       </div>
 37 |     </div>
 38 | 
 39 |     <div>
 40 |       <div class="title">使用过渡动画</div>
 41 |       <div class="item">
 42 |         <cc-countup :startVal="0" :endVal="3000"></cc-countup>
 43 |       </div>
 44 |       <div class="item">
 45 |         <cc-countup :startVal="0" :useEasing="false" :endVal="3000"></cc-countup>
 46 |       </div>
 47 |     </div>
 48 | 
 49 |     <div>
 50 |       <div class="title">前缀和后缀内容</div>
 51 |       <div class="item">
 52 |         <cc-countup prefix="￥" :startVal="0" :endVal="3000"></cc-countup>
 53 |       </div>
 54 |       <div class="item">
 55 |         <cc-countup :startVal="0" suffix="元" :endVal="3000"></cc-countup>
 56 |       </div>
 57 |     </div>
 58 | 
 59 |     <div>
 60 |       <div class="title">滚动持续时长</div>
 61 |       <div class="item">
 62 |         <cc-countup :duration="5" :startVal="0" :endVal="3000"></cc-countup>
 63 |       </div>
 64 |       <div class="item">
 65 |         <cc-countup :duration="1" :startVal="0" :endVal="3000"></cc-countup>
 66 |       </div>
 67 |     </div>
 68 | 
 69 |     <div>
 70 |       <div class="title">逆向滚动</div>
 71 |       <div class="item">
 72 |         <cc-countup :startVal="3000" :endVal="0"></cc-countup>
 73 |       </div>
 74 |     </div>
 75 | 
 76 |     <div>
 77 |       <div class="title">实例方法</div>
 78 |       <div class="item">
 79 |         <cc-countup :end='end' :autoplay="false" ref="countup" :startVal="0" :endVal="10000"></cc-countup>
 80 |       </div>
 81 |       <div class="item">
 82 |         <cc-button type="primary" size="small" @click="start">开始</cc-button>
 83 |         <cc-button type="primary" size="small" @click="pauseResume">暂停</cc-button>
 84 |         <cc-button type="primary" size="small" @click="reset">重置</cc-button>
 85 |       </div>
 86 |     </div>
 87 |   </div>
 88 | </template>
 89 | 
 90 | <script setup lang="ts">
 91 | import { ref } from "vue"
 92 | 
 93 | let countup = ref()
 94 | 
 95 | let end = () => {
 96 |   console.log('end')
 97 | }
 98 | let start = () => {
 99 |   countup.value.countup.start(end)
100 | }
101 | let pauseResume = () => {
102 |   countup.value.countup.pauseResume()
103 | }
104 | let reset = () => {
105 |   countup.value.countup.reset()
106 | }
107 | 
108 | 
109 | </script>
110 | 
111 | <style scoped lang="scss">
112 | .title {
113 |   margin: #{topx(10)};
114 | }
115 | .item {
116 |   display: flex;
117 |   flex-wrap: wrap;
118 |   align-items: center;
119 |   button {
120 |     margin-right: #{topx(5)};
121 |   }
122 | }
123 | </style>


--------------------------------------------------------------------------------
/src/components/cc-icon/icons.ts:
--------------------------------------------------------------------------------
  1 | export default {
  2 | 	"pulldown": "\ue588",
  3 | 	"refreshempty": "\ue461",
  4 | 	"back": "\ue471",
  5 | 	"forward": "\ue470",
  6 | 	"more": "\ue507",
  7 | 	"more-filled": "\ue537",
  8 | 	"scan": "\ue612",
  9 | 	"qq": "\ue264",
 10 | 	"weibo": "\ue260",
 11 | 	"weixin": "\ue261",
 12 | 	"pengyouquan": "\ue262",
 13 | 	"loop": "\ue565",
 14 | 	"refresh": "\ue407",
 15 | 	"refresh-filled": "\ue437",
 16 | 	"arrowthindown": "\ue585",
 17 | 	"arrowthinleft": "\ue586",
 18 | 	"arrowthinright": "\ue587",
 19 | 	"arrowthinup": "\ue584",
 20 | 	"undo-filled": "\ue7d6",
 21 | 	"undo": "\ue406",
 22 | 	"redo": "\ue405",
 23 | 	"redo-filled": "\ue7d9",
 24 | 	"bars": "\ue563",
 25 | 	"chatboxes": "\ue203",
 26 | 	"camera": "\ue301",
 27 | 	"chatboxes-filled": "\ue233",
 28 | 	"camera-filled": "\ue7ef",
 29 | 	"cart-filled": "\ue7f4",
 30 | 	"cart": "\ue7f5",
 31 | 	"checkbox-filled": "\ue442",
 32 | 	"checkbox": "\ue7fa",
 33 | 	"arrowleft": "\ue582",
 34 | 	"arrowdown": "\ue581",
 35 | 	"arrowright": "\ue583",
 36 | 	"smallcircle-filled": "\ue801",
 37 | 	"arrowup": "\ue580",
 38 | 	"circle": "\ue411",
 39 | 	"eye-filled": "\ue568",
 40 | 	"eye-slash-filled": "\ue822",
 41 | 	"eye-slash": "\ue823",
 42 | 	"eye": "\ue824",
 43 | 	"flag-filled": "\ue825",
 44 | 	"flag": "\ue508",
 45 | 	"gear-filled": "\ue532",
 46 | 	"reload": "\ue462",
 47 | 	"gear": "\ue502",
 48 | 	"hand-thumbsdown-filled": "\ue83b",
 49 | 	"hand-thumbsdown": "\ue83c",
 50 | 	"hand-thumbsup-filled": "\ue83d",
 51 | 	"heart-filled": "\ue83e",
 52 | 	"hand-thumbsup": "\ue83f",
 53 | 	"heart": "\ue840",
 54 | 	"home": "\ue500",
 55 | 	"info": "\ue504",
 56 | 	"home-filled": "\ue530",
 57 | 	"info-filled": "\ue534",
 58 | 	"circle-filled": "\ue441",
 59 | 	"chat-filled": "\ue847",
 60 | 	"chat": "\ue263",
 61 | 	"mail-open-filled": "\ue84d",
 62 | 	"email-filled": "\ue231",
 63 | 	"mail-open": "\ue84e",
 64 | 	"email": "\ue201",
 65 | 	"checkmarkempty": "\ue472",
 66 | 	"list": "\ue562",
 67 | 	"locked-filled": "\ue856",
 68 | 	"locked": "\ue506",
 69 | 	"map-filled": "\ue85c",
 70 | 	"map-pin": "\ue85e",
 71 | 	"map-pin-ellipse": "\ue864",
 72 | 	"map": "\ue364",
 73 | 	"minus-filled": "\ue440",
 74 | 	"mic-filled": "\ue332",
 75 | 	"minus": "\ue410",
 76 | 	"micoff": "\ue360",
 77 | 	"mic": "\ue302",
 78 | 	"clear": "\ue434",
 79 | 	"smallcircle": "\ue868",
 80 | 	"close": "\ue404",
 81 | 	"closeempty": "\ue460",
 82 | 	"paperclip": "\ue567",
 83 | 	"paperplane": "\ue503",
 84 | 	"paperplane-filled": "\ue86e",
 85 | 	"person-filled": "\ue131",
 86 | 	"contact-filled": "\ue130",
 87 | 	"person": "\ue101",
 88 | 	"contact": "\ue100",
 89 | 	"images-filled": "\ue87a",
 90 | 	"phone": "\ue200",
 91 | 	"images": "\ue87b",
 92 | 	"image": "\ue363",
 93 | 	"image-filled": "\ue877",
 94 | 	"location-filled": "\ue333",
 95 | 	"location": "\ue303",
 96 | 	"plus-filled": "\ue439",
 97 | 	"plus": "\ue409",
 98 | 	"plusempty": "\ue468",
 99 | 	"help-filled": "\ue535",
100 | 	"help": "\ue505",
101 | 	"navigate-filled": "\ue884",
102 | 	"navigate": "\ue501",
103 | 	"mic-slash-filled": "\ue892",
104 | 	"search": "\ue466",
105 | 	"settings": "\ue560",
106 | 	"sound": "\ue590",
107 | 	"sound-filled": "\ue8a1",
108 | 	"spinner-cycle": "\ue465",
109 | 	"download-filled": "\ue8a4",
110 | 	"personadd-filled": "\ue132",
111 | 	"videocam-filled": "\ue8af",
112 | 	"personadd": "\ue102",
113 | 	"upload": "\ue402",
114 | 	"upload-filled": "\ue8b1",
115 | 	"starhalf": "\ue463",
116 | 	"star-filled": "\ue438",
117 | 	"star": "\ue408",
118 | 	"trash": "\ue401",
119 | 	"phone-filled": "\ue230",
120 | 	"compose": "\ue400",
121 | 	"videocam": "\ue300",
122 | 	"trash-filled": "\ue8dc",
123 | 	"download": "\ue403",
124 | 	"chatbubble-filled": "\ue232",
125 | 	"chatbubble": "\ue202",
126 | 	"cloud-download": "\ue8e4",
127 | 	"cloud-upload-filled": "\ue8e5",
128 | 	"cloud-upload": "\ue8e6",
129 | 	"cloud-download-filled": "\ue8e9",
130 | 	"headphones":"\ue8bf",
131 | 	"shop":"\ue609"
132 | }
133 | 


--------------------------------------------------------------------------------
/src/components/cc-cell/cc-cell.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="cc-cell"
  4 |     :class="[
  5 |       { 'cc-cell-large': size },
  6 |       { 'cc-cell-border': border }
  7 |     ]"
  8 |     @click="onClick"
  9 |   >
 10 |     <div>
 11 |       <div class="cc-cell-title">
 12 |         <div v-if="icon" class="cc-cell-left-icon">
 13 |           <cc-icon :size="iconSize" :type="icon" color="#323233"></cc-icon>
 14 |           <slot name="left-icon"></slot>
 15 |         </div>
 16 |         <div >
 17 |           {{ title }}
 18 |           <slot  name="title" v-if="!title"></slot>
 19 |         </div>
 20 |       </div>
 21 |       <div class="cc-cell-label">
 22 |         {{ label }}
 23 |         <slot name="label" v-if="!label"></slot>
 24 |       </div>
 25 |     </div>
 26 |     <div class="cc-cell-value">
 27 |       <div class="cc-cell-value-wrap">
 28 |         {{ value }}
 29 |         <slot name="value" v-if="!value"></slot>
 30 |       </div>
 31 |       <div class="cc-cell-right-icon">
 32 |         <cc-icon color="#969799" v-if="isLink" :type="`arrow${arrowDirection}`" :size="iconSize"></cc-icon>
 33 |         <slot name="right-icon"></slot>
 34 |       </div>
 35 |     </div>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script lang='ts' setup>
 40 | import { defineProps, defineEmits, PropType } from 'vue'
 41 | 
 42 | type CellSizeProps = '' | 'large'
 43 | type CellArrowDirectionProps = 'right' | 'left' | 'up' | 'down'
 44 | 
 45 | let props = defineProps({
 46 |   // 标题
 47 |   title: {
 48 |     type: String
 49 |   },
 50 |   // 右侧内容
 51 |   value: {
 52 |     type: String
 53 |   },
 54 |   // 标题下方描述
 55 |   label: {
 56 |     type: String
 57 |   },
 58 |   // 左侧图标
 59 |   icon: {
 60 |     type: String
 61 |   },
 62 |   // 是否显示边框
 63 |   border: {
 64 |     type: Boolean,
 65 |     default: true
 66 |   },
 67 |   // 尺寸
 68 |   size: {
 69 |     type: String as PropType<CellSizeProps>,
 70 |   },
 71 |   // 显示右侧箭头
 72 |   isLink: {
 73 |     type: Boolean,
 74 |     default: false
 75 |   },
 76 |   // 箭头方向
 77 |   arrowDirection: {
 78 |     type: String as PropType<CellArrowDirectionProps>,
 79 |     default: 'right',
 80 |   },
 81 |   iconSize: {
 82 |     type: String,
 83 |     default: '16'
 84 |   },
 85 | })
 86 | let emits = defineEmits(['click'])
 87 | let onClick = () => {
 88 |   emits('click')
 89 | }
 90 | </script>
 91 | 
 92 | <style lang="scss" scoped>
 93 | .cc-cell {
 94 |   position: relative;
 95 |   display: flex;
 96 |   align-items: center;
 97 |   box-sizing: border-box;
 98 |   width: 100%;
 99 |   padding: 10px 16px;
100 |   overflow: hidden;
101 |   color: #323233;
102 |   font-size: 14px;
103 |   background-color: #fff;
104 |   &-border::after {
105 |     position: absolute;
106 |     box-sizing: border-box;
107 |     content: ' ';
108 |     pointer-events: none;
109 |     right: 16px;
110 |     bottom: 0;
111 |     left: 16px;
112 |     border-bottom: 1px solid #ebedf0;
113 |     transform: scaleY(0.5);
114 |   }
115 |   &-left-icon {
116 |     margin-right: 4px;
117 |     flex-shrink: 0;
118 |   }
119 |   &-large {
120 |     padding-top: 12px;
121 |     padding-bottom: 12px;
122 |   }
123 |   &-title,
124 |   &-value {
125 |     flex: 1;
126 |   }
127 |   &-title {
128 |     display: flex;
129 |     align-items: center;
130 |   }
131 |   &-value {
132 |     display: flex;
133 |     justify-content: flex-end;
134 |     align-items: center;
135 |     position: relative;
136 |     overflow: hidden;
137 |     color: #969799;
138 |     text-align: right;
139 |     vertical-align: middle;
140 |     word-wrap: break-word;
141 |     &-wrap {
142 |       width: 100%;
143 |       display: flex;
144 |       align-items: center;
145 |       justify-content: flex-end;
146 |     }
147 |     .cc-cell-right-icon {
148 |       position: relative;
149 |       top: 1px;
150 |       margin-left: 4px;
151 |     }
152 |   }
153 |   &-label {
154 |     margin-top: 4px;
155 |     color: #969799;
156 |     font-size: 12px;
157 |     line-height: 18px;
158 |   }
159 | }
160 | </style>


--------------------------------------------------------------------------------
/src/views/tabbar/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="background: #F7F8FA;">
  3 |     <div class="demo">
  4 |       <div class="demo-title">基础用法</div>
  5 |       <div class="demo-item">
  6 |         <cc-tabbar :list='list1' @change="handleChange"></cc-tabbar>
  7 |       </div>
  8 |     </div>
  9 | 
 10 |     <!-- <div class="demo">
 11 |       <div class="demo-title demo-title-fixed">固定在底部</div>
 12 |       <div class="demo-item">
 13 |         <cc-tabbar :list='list1' fixed></cc-tabbar>
 14 |       </div>
 15 |     </div> -->
 16 | 
 17 |     <div class="demo">
 18 |       <div class="demo-title">徽标提示</div>
 19 |       <div class="demo-item">
 20 |         <cc-tabbar :list='list2'></cc-tabbar>
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <div class="demo">
 25 |       <div class="demo-title">自定义颜色</div>
 26 |       <div class="demo-item">
 27 |         <cc-tabbar :list='list1' active-color="#ee0a24" inactive-color="#000"></cc-tabbar>
 28 |       </div>
 29 |     </div>
 30 | 
 31 |     <div class="demo">
 32 |       <div class="demo-title">自定义背景颜色</div>
 33 |       <div class="demo-item">
 34 |         <cc-tabbar :list='list1' bgColor='#ddd'></cc-tabbar>
 35 |       </div>
 36 |     </div>
 37 | 
 38 |     <div class="demo">
 39 |       <div class="demo-title">路由跳转</div>
 40 |       <div class="demo-item">
 41 |         <cc-tabbar :list='list3' router></cc-tabbar>
 42 |       </div>
 43 |     </div>
 44 | 
 45 |     <div class="demo">
 46 |       <div class="demo-title">中间凸起按钮</div>
 47 |       <div class="demo-item">
 48 |         <cc-tabbar :list='list4'>
 49 |           <template #plus='{item}'>
 50 |             <img width="37" height="37" :src="item.active ? 'https://cdn.uviewui.com/uview/common/min_button_select.png' : 'https://cdn.uviewui.com/uview/common/min_button.png'" />
 51 |           </template>
 52 |         </cc-tabbar>
 53 |       </div>
 54 |     </div>
 55 |   </div>
 56 | </template>
 57 | 
 58 | <script setup lang="ts">
 59 | import { TabbarListItem } from "@/components/cc-tabbar/cc-tabbar.vue"
 60 | 
 61 | let list1: TabbarListItem[] = [
 62 |   {
 63 |     text: '首页',
 64 |     icon: 'home'
 65 |   },
 66 |   {
 67 |     text: '分类',
 68 |     icon: 'bars'
 69 |   },
 70 |   {
 71 |     text: '购物车',
 72 |     icon: 'cart'
 73 |   },
 74 |   {
 75 |     text: '我的',
 76 |     icon: 'person'
 77 |   }
 78 | ]
 79 | let list2: TabbarListItem[] = [
 80 |   {
 81 |     text: '首页',
 82 |     icon: 'home',
 83 |     dot: true
 84 |   },
 85 |   {
 86 |     text: '分类',
 87 |     icon: 'bars',
 88 |     count: 1
 89 |   },
 90 |   {
 91 |     text: '购物车',
 92 |     icon: 'cart',
 93 |     dot: true
 94 |   },
 95 |   {
 96 |     text: '我的',
 97 |     icon: 'person',
 98 |     count: 22
 99 |   }
100 | ]
101 | let list3: TabbarListItem[] = [
102 |   {
103 |     text: '首页',
104 |     icon: 'home',
105 |     url: '/tabbar'
106 |   },
107 |   {
108 |     text: '分类',
109 |     icon: 'bars',
110 |     url: '/category'
111 |   },
112 |   {
113 |     text: '购物车',
114 |     icon: 'cart',
115 |     url: '/cart'
116 |   },
117 |   {
118 |     text: '我的',
119 |     icon: 'person',
120 |     url: '/my'
121 |   }
122 | ]
123 | let list4: TabbarListItem[] = [
124 |   {
125 |     text: '首页',
126 |     icon: 'home',
127 |     url: '/tabbar'
128 |   },
129 |   {
130 |     text: '分类',
131 |     icon: 'bars',
132 |     url: '/category'
133 |   },
134 |   {
135 |     text: '发布',
136 |     slots: 'plus',
137 |     midButton: true,
138 |   },
139 |   {
140 |     text: '购物车',
141 |     icon: 'cart',
142 |     url: '/cart'
143 |   },
144 |   {
145 |     text: '我的',
146 |     icon: 'person',
147 |     url: '/my'
148 |   }
149 | ]
150 | 
151 | let handleChange = ({item, index}: {item: TabbarListItem, index: number}) => {
152 |   console.log(item, index)
153 | }
154 | </script>
155 | 
156 | <style scoped lang="scss">
157 | .demo {
158 |   margin-bottom: #{topx(20)};
159 | 
160 |   &-title {
161 |     padding: #{topx(10)};
162 |     &-fixed {
163 |       position: fixed;
164 |       left: 0;
165 |       right: 0;
166 |       bottom: 60px;
167 |     }
168 |   }
169 |   &-item {
170 |     margin-bottom: 10px;
171 |   }
172 | }
173 | </style>


--------------------------------------------------------------------------------
/src/components/cc-loading/cc-loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="cc-loading" :style="{ flexDirection: vertical ? 'column' : 'row' }">
 3 |     <div
 4 |       class="cc-loading"
 5 |       :class="[`${className}`]"
 6 |       :style="{
 7 |         width: size + 'px',
 8 |         height: size + 'px', 
 9 |         borderLeftColor: type ==='circle' && color ? color : '#c7c7c7',
10 |         
11 |       }"
12 |     ></div>
13 |     <div
14 |       :style="{ color: textColor, fontSize: textSize + 'px' }"
15 |       :class="{ 'cc-loading-icon-left': !vertical, 'cc-loading-icon-top': vertical }"
16 |     >
17 |       <slot></slot>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script setup lang="ts">
23 | import { computed, defineProps, PropType } from 'vue'
24 | 
25 | let props = defineProps({
26 |   type: {
27 |     type: String as PropType<'circle' | 'spinner'>,
28 |     default: 'circle'
29 |   },
30 |   // 自定义颜色
31 |   color: {
32 |     type: String,
33 |     default: '#c8c9cc'
34 |   },
35 |   // 尺寸大小
36 |   size: {
37 |     type: String,
38 |     default: '22'
39 |   },
40 |   // 文字大小
41 |   textSize: {
42 |     type: String,
43 |     default: '14'
44 |   },
45 |   // 文字颜色
46 |   textColor: {
47 |     type: String,
48 |     default: '#c9c9c9'
49 |   },
50 |   // 是否垂直排列图标和文字内容
51 |   vertical: {
52 |     type: Boolean,
53 |     default: false
54 |   }
55 | })
56 | 
57 | let className = computed(() => {
58 |   if (props.type) return `cc-loading-icon-${props.type}`
59 |   else return ''
60 | })
61 | </script>
62 | 
63 | <style lang="scss">
64 | .cc-loading {
65 |   display: flex;
66 |   &-icon {
67 |     &-circle {
68 |       animation: loading 1s linear infinite;
69 |       width: 11px;
70 |       height: 11px;
71 |       border-radius: 50%;
72 |       border: 2px solid;
73 |       border-color: #e4e4e4;
74 |     }
75 |     &-spinner {
76 |       animation: loading 1s linear infinite;
77 |       background: transparent
78 |         url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=)
79 |         no-repeat;
80 |       background-size: 100%;
81 |     }
82 |     &-left {
83 |       margin-left: #{topx(8)};
84 |     }
85 |     &-top {
86 |       margin-top: #{topx(8)};
87 |     }
88 |   }
89 | }
90 | @keyframes loading {
91 |   from {
92 |     transform: rotate(0);
93 |   }
94 |   to {
95 |     transform: rotate(1turn);
96 |   }
97 | }
98 | </style>


--------------------------------------------------------------------------------
/src/views/popup/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div>
  4 |       <div class="title">基础语法</div>
  5 |       <div class="item">
  6 |         <cc-popup v-model:show="show1">红是朱砂痣烙印心口</cc-popup>
  7 |         <cc-button @click="open1" size="small">打开弹框</cc-button>
  8 |       </div>
  9 |     </div>
 10 | 
 11 |     <div>
 12 |       <div class="title">弹出框方向</div>
 13 |       <div class="item">
 14 |         <cc-popup v-model:show="show2" mode="left">红是蚊子血般平庸</cc-popup>
 15 |         <cc-button @click="open2">左边打开</cc-button>
 16 |       </div>
 17 |       <div class="item">
 18 |         <cc-popup v-model:show="show3" mode="right">
 19 |           <div class="flex">从背后抱你的时候</div>
 20 |         </cc-popup>
 21 |         <cc-button @click="open3">右边打开</cc-button>
 22 |       </div>
 23 |       <div class="item">
 24 |         <cc-popup v-model:show="show4" mode="top">期待的却是他的面容</cc-popup>
 25 |         <cc-button @click="open4">顶部打开</cc-button>
 26 |       </div>
 27 |       <div class="item">
 28 |         <cc-popup v-model:show="show5" mode="bottom">
 29 |           <div>握在手中却流失于指缝</div>
 30 |         </cc-popup>
 31 |         <cc-button @click="open5">底部打开</cc-button>
 32 |       </div>
 33 |     </div>
 34 | 
 35 |     <div>
 36 |       <div class="title">关闭按钮</div>
 37 |       <div class="item">
 38 |         <cc-popup v-model:show="show6" closeable>我不好爱</cc-popup>
 39 |         <cc-button @click="open6">关闭按钮</cc-button>
 40 |       </div>
 41 |       <div class="item">
 42 |         <cc-popup v-model:show="show7" mode="left" closeable>你又美丽又伟大</cc-popup>
 43 |         <cc-button @click="open7">关闭按钮</cc-button>
 44 |       </div>
 45 |       <div class="item">
 46 |         <cc-popup closeIcon="search" v-model:show="show8" closeable>得你一人越来越可爱</cc-popup>
 47 |         <cc-button @click="open8">自定义关闭图标</cc-button>
 48 |       </div>
 49 |     </div>
 50 | 
 51 |     <div>
 52 |       <div class="title">自定义宽高</div>
 53 |       <div class="item">
 54 |         <cc-popup width="600" v-model:show="show9" closeable>烟味</cc-popup>
 55 |         <cc-button @click="open9">自定义宽度</cc-button>
 56 |       </div>
 57 |       <div class="item">
 58 |         <cc-popup width="600" v-model:show="show10" mode="left" closeable>颓废,混杂着烟味</cc-popup>
 59 |         <cc-button @click="open10">自定义宽度</cc-button>
 60 |       </div>
 61 |       <div class="item">
 62 |         <cc-popup height="600" mode="bottom" v-model:show="show11" closeable>
 63 |           <div class="content">我满脸胡渣</div>
 64 |         </cc-popup>
 65 |         <cc-button @click="open11">自定义高度</cc-button>
 66 |       </div>
 67 |     </div>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script lang="ts" setup>
 72 | import { ref } from 'vue'
 73 | let show1 = ref<boolean>(false)
 74 | let show2 = ref<boolean>(false)
 75 | let show3 = ref<boolean>(false)
 76 | let show4 = ref<boolean>(false)
 77 | let show5 = ref<boolean>(false)
 78 | let show6 = ref<boolean>(false)
 79 | let show7 = ref<boolean>(false)
 80 | let show8 = ref<boolean>(false)
 81 | let show9 = ref<boolean>(false)
 82 | let show10 = ref<boolean>(false)
 83 | let show11 = ref<boolean>(false)
 84 | let open1 = () => {
 85 |   show1.value = true
 86 | }
 87 | let open2 = () => {
 88 |   show2.value = true
 89 | }
 90 | let open3 = () => {
 91 |   show3.value = true
 92 | }
 93 | let open4 = () => {
 94 |   show4.value = true
 95 | }
 96 | let open5 = () => {
 97 |   show5.value = true
 98 | }
 99 | let open6 = () => {
100 |   show6.value = true
101 | }
102 | let open7 = () => {
103 |   show7.value = true
104 | }
105 | let open8 = () => {
106 |   show8.value = true
107 | }
108 | let open9 = () => {
109 |   show9.value = true
110 | }
111 | let open10 = () => {
112 |   show10.value = true
113 | }
114 | let open11 = () => {
115 |   show11.value = true
116 | }
117 | </script>
118 | 
119 | <style scoped  lang="scss">
120 | .title {
121 |   margin: #{topx(10)}
122 | }
123 | .item {
124 |   display: flex;
125 |   flex-wrap: wrap;
126 |   align-items: center;
127 |   margin:  #{topx(10)};
128 |   div {
129 |     margin:  #{topx(5)};
130 |   }
131 | }
132 | .flex {
133 |   display: flex;
134 |   align-items: center;
135 |   justify-content: center;
136 |   height: 100%;
137 | }
138 | .content {
139 |   height: 1000rpx;
140 | }
141 | </style>


--------------------------------------------------------------------------------
/src/components/cc-contact-list/cc-contact-list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cc-contact-list">
  3 |     <div
  4 |       class="cc-contact-list-item"
  5 |       :class="{ 'cc-contact-list-item-disabled': item.disabled }"
  6 |       v-for="(item, index) in contactList"
  7 |       :key="item.id"
  8 |       @click="clickItem(item, index)"
  9 |     >
 10 |       <div class="cc-contact-list-item-wrap">
 11 |         <div class="cc-contact-list-item-edit" @click.stop="edit(item, index)">
 12 |           <cc-icon type="paperclip" color="#969799"></cc-icon>
 13 |         </div>
 14 |         <div class="cc-contact-list-item-wrap-name">{{ item.name }},</div>
 15 |         <div class="cc-contact-list-item-wrap-tel">{{ item.tel }}</div>
 16 |         <div v-if="item.isDefault">
 17 |           <cc-tag type="error" round>{{ defaultTagText }}</cc-tag>
 18 |         </div>
 19 |       </div>
 20 |       <div class="cc-contact-list-check" v-if="item.radioList">
 21 |         <cc-radio v-model:value="currentValue" :list="item.radioList"></cc-radio>
 22 |       </div>
 23 |     </div>
 24 |     <div class="cc-contact-list-button" @click="add">
 25 |       <cc-button round block :color="addButtonColor">{{ addText }}</cc-button>
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script setup lang="ts">
 31 | import { defineProps, defineEmits, ref, PropType, onMounted } from 'vue'
 32 | import cloneDeep from 'lodash/cloneDeep'
 33 | 
 34 | interface ContactListItemRadioList {
 35 |   value: string,
 36 |   checkedColor: string,
 37 |   disabled?: boolean
 38 | }
 39 | 
 40 | export interface ContactListItem {
 41 |   id: string,
 42 |   name: string,
 43 |   tel: string,
 44 |   isDefault?: boolean,
 45 |   disabled?: boolean,
 46 |   checked?: boolean,
 47 |   radioList?: ContactListItemRadioList[]
 48 | }
 49 | 
 50 | let props = defineProps({
 51 |   // 当前选中联系人的 id
 52 |   value: {
 53 |     type: [Number, String],
 54 |     default: ''
 55 |   },
 56 |   // 联系人列表
 57 |   list: {
 58 |     type: Array as PropType<ContactListItem[]>,
 59 |     required: true
 60 |   },
 61 |   // 添加按钮文案
 62 |   addText: {
 63 |     type: String,
 64 |     default: '新建联系人'
 65 |   },
 66 |   // 添加按钮颜色
 67 |   addButtonColor: {
 68 |     type: String,
 69 |     default: '#ee0a24'
 70 |   },
 71 |   // 默认联系人标签文案
 72 |   defaultTagText: {
 73 |     type: String,
 74 |     default: '默认'
 75 |   }
 76 | })
 77 | let emits = defineEmits(['select', 'edit', 'add'])
 78 | 
 79 | let contactList = ref<ContactListItem[]>(cloneDeep(props.list))
 80 | let currentValue = ref<string>('')
 81 | let currentIndex = ref<number>(0)
 82 | 
 83 | let init = () => {
 84 |   contactList.value.map((item: ContactListItem, index: number) => {
 85 |     item.checked = false
 86 |     if (item.disabled) item.radioList = [{ value: item.id, checkedColor: '#e54d42', disabled: true }]
 87 |     else item.radioList = [{ value: item.id, checkedColor: '#e54d42' }]
 88 | 
 89 |     if (props.value === item.id) {
 90 |       currentIndex.value = index
 91 |       currentValue.value = item.id
 92 |       item.checked = true
 93 |     }
 94 |   })
 95 | }
 96 | 
 97 | let clickItem = (item: ContactListItem, index: number) => {
 98 |   if (item.disabled) return
 99 |   currentValue.value = item.id
100 |   emits('select', { item, index })
101 | }
102 | 
103 | let edit = (item: ContactListItem, index: number) => {
104 |   if (item.disabled) return
105 |   emits('edit', { item, index })
106 | }
107 | let add = () => {
108 |   emits('add')
109 | }
110 | onMounted(() => {
111 |   init()
112 | })
113 | </script>
114 | 
115 | <style scoped lang="scss">
116 | .cc-contact-list {
117 |   background: #fff;
118 |   &-item {
119 |     display: flex;
120 |     align-items: center;
121 |     justify-content: space-between;
122 |     padding: 16px;
123 |     &-disabled {
124 |       opacity: 0.6;
125 |     }
126 |     &-wrap {
127 |       display: flex;
128 |       align-items: center;
129 |       &-name {
130 |         margin: 0 15px;
131 |       }
132 |       &-tel {
133 |         margin-right: 15px;
134 |       }
135 |     }
136 |   }
137 |   &-button {
138 |     position: fixed;
139 |     bottom: 0;
140 |     left: 0;
141 |     right: 0;
142 |     background: #fff;
143 |     padding: 8px 15px;
144 |   }
145 | }
146 | </style>


--------------------------------------------------------------------------------
/src/components/cc-nav-bar/cc-nav-bar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="{'cc-nav-bar-fixed': fixed}" class="cc-nav-bar" :style="{ background, zIndex: Number(zIndex) }">
  3 |     <div class="cc-nav-bar-left" @click="clickLeft">
  4 |       <div>
  5 |         <slot v-if="slots.left" name="left"></slot>
  6 |         <div v-else class="cc-nav-bar-left-content">
  7 |           <div class="cc-nav-bar-left-content-icon" v-if="leftArrow">
  8 |             <cc-icon :color="background ? '#fff' : leftIconColor" :type="leftIcon"></cc-icon>
  9 |           </div>
 10 |           <div :style="{ color: background ? '#fff' : leftTextColor }" 
 11 |           class="cc-nav-bar-left-content-text">{{ leftText }}</div>
 12 |         </div>
 13 |       </div>
 14 |     </div>
 15 |     <div  @click="clickTitle">
 16 |       <slot v-if="slots.default"></slot>
 17 |       <div class="cc-nav-bar-title" v-else :style="{color: background ? '#fff' : titleColor}">{{ title }}</div>
 18 |     </div>
 19 |     <div class="cc-nav-bar-right" @click="clickRight">
 20 |       <div>
 21 |         <slot name="right" v-if="slots.right"></slot>
 22 |         <div :style="{ color: background ? '#fff' : rightColor, fontSize: titleSize }" v-else>{{ rightText }}</div>
 23 |       </div>
 24 |     </div>
 25 |   </div>
 26 |   <div v-if="fixed && placeholder" class="cc-nav-bar-placeholder"></div>
 27 | </template>
 28 | 
 29 | <script setup lang="ts">
 30 | import { defineProps, defineEmits, useSlots } from 'vue'
 31 | 
 32 | let props = defineProps({
 33 |   // 标题
 34 |   title: {
 35 |     type: String,
 36 |     default: ''
 37 |   },
 38 |   // 标题颜色
 39 |   titleColor: {
 40 |     type: String,
 41 |     default: '#606266'
 42 |   },
 43 |   titleSize: {
 44 |     type: String,
 45 |     default: '22'
 46 |   },
 47 |   // 左侧文字
 48 |   leftText: {
 49 |     type: String,
 50 |     default: ''
 51 |   },
 52 |   // 左侧图标
 53 |   leftIcon: {
 54 |     type: String,
 55 |     default: 'arrowleft'
 56 |   },
 57 |   // 左侧图标颜色
 58 |   leftIconColor: {
 59 |     type: String,
 60 |     default: '#606266'
 61 |   },
 62 |   // 左侧文字颜色
 63 |   leftTextColor: {
 64 |     type: String,
 65 |     default: '#606266'
 66 |   },
 67 |   // 右侧标题
 68 |   rightText: {
 69 |     type: String,
 70 |     default: ''
 71 |   },
 72 |   // 右侧文字颜色
 73 |   rightColor: {
 74 |     type: String,
 75 |     default: '#606266'
 76 |   },
 77 |   // 导航栏背景颜色
 78 |   background: {
 79 |     type: String,
 80 |     default: ''
 81 |   },
 82 |   // 是否显示左侧箭头
 83 |   leftArrow: {
 84 |     type: Boolean,
 85 |     default: false
 86 |   },
 87 |   // 是否固定在顶部
 88 |   fixed: {
 89 |     type: Boolean,
 90 |     default: false
 91 |   },
 92 |   // 固定在顶部时，是否在标签位置生成一个等高的占位元素
 93 |   placeholder: {
 94 |     type: Boolean,
 95 |     default: false
 96 |   },
 97 |   // 固定在顶部的层级
 98 |   zIndex: {
 99 |     type: [String, Number],
100 |     default: 999
101 |   }
102 | })
103 | let emits = defineEmits(['clickLeft', 'clickRight', 'clickTitle'])
104 | let slots = useSlots()
105 | 
106 | let clickLeft = () => {
107 |   emits('clickLeft')
108 | }
109 | let clickTitle = () => {
110 |   emits('clickTitle')
111 | }
112 | let clickRight = () => {
113 |   emits('clickRight')
114 | }
115 | 
116 | </script>
117 | 
118 | <style scoped lang='scss'>
119 | .cc-nav-bar {
120 |   display: flex;
121 |   align-items: center;
122 |   height: 44px;
123 |   justify-content: space-between;
124 |   padding: 0 #{topx(20)};
125 |   background: #fff;
126 |   &-placeholder {
127 |     height: 44px;
128 |   }
129 |   &-fixed {
130 |     position: fixed;
131 |     top: 0;
132 |     left: 0;
133 |     right: 0;
134 |   }
135 |   &-title {
136 |     width: #{topx(200)};
137 |     text-align: center;
138 |     text-overflow: ellipsis;
139 |     overflow: hidden;
140 |     white-space: nowrap;
141 |   }
142 |   &-left,
143 |   &-right {
144 |     font-size: 14px;
145 |     height: 44px;
146 |     display: flex;
147 |     align-items: center;
148 |   }
149 |   &-left {
150 |     &-content {
151 |       display: flex;
152 |       align-items: center;
153 |       &-icon {
154 |         height: 44px;
155 |         display: flex;
156 |         align-items: center;
157 |       }
158 |       &-text {
159 |         margin-left: #{topx(4)};
160 |       }
161 |     }
162 |   }
163 | }
164 | </style>


--------------------------------------------------------------------------------