diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000000000000000000000000000000000000..83781052ed17b9871e56c5c5dce564443b536f88 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +registry=https://registry.npmjs.org +engine-strict=true diff --git a/src/config.js b/src/config.js index c83b03dd7a15b6eeb7618974ec24fdff6ae7892e..358518e8977917054a4ab099f5c1f7127e2ca210 100644 --- a/src/config.js +++ b/src/config.js @@ -155,6 +155,16 @@ module.exports = { show: true, desc: '轻提示', author: 'undo' + }, + { + version: '3.0.0', + name: 'Notify', + type: 'component', + cName: '消息提示', + desc: '在页面顶部展示消息提示，支持函数调用和组件调用两种方式', + sort: 4, + show: true, + author: 'wangyue217' } ] }, @@ -334,6 +344,16 @@ module.exports = { show: true, desc: '标签栏组件', author: 'Drjingfubo' + }, + { + version: '3.0.0', + name: 'NoticeBar', + type: 'component', + cName: '公告栏', + desc: '用于循环播放展示一组消息通知', + sort: 5, + show: false, + author: 'wangyue92' } ] }, diff --git a/src/packages/calendar/demo.vue b/src/packages/calendar/demo.vue index 7053325992fb4911476dcec9ad33ed38caf87a60..dc708b58877f5694ebbe87fd69329770ab26a31d 100644 --- a/src/packages/calendar/demo.vue +++ b/src/packages/calendar/demo.vue @@ -39,13 +39,34 @@ > -

自定义日历

+ +

自定义日历-自动回填

+
+ + + + +
+

平铺展示

@@ -64,12 +85,11 @@ interface TestCalendarState { isVisible: boolean; date: string; dateWeek: string; - - date2: string; - isVisible2: boolean; - isVisible1: boolean; date1: string[]; + date2: string; + isVisible3: boolean; + date3: string; } export default createDemo({ props: {}, @@ -79,11 +99,13 @@ export default createDemo({ date: '', dateWeek: '', + isVisible1: false, + date1: ['2019-12-23', '2019-12-26'], + date2: '2020-07-08', - isVisible2: true, - isVisible1: false, - date1: ['2019-12-23', '2019-12-26'] + isVisible3: false, + date3: '' }); const openSwitch = param => { state[`${param}`] = true; @@ -98,13 +120,17 @@ export default createDemo({ state.dateWeek = param[4]; }; + const setChooseValue1 = param => { + state.date1 = [...[param[0][3], param[1][3]]]; + }; + const setChooseValue2 = param => { state.date2 = param[3]; console.log(state.date2); }; - const setChooseValue1 = param => { - state.date1 = [...[param[0][3], param[1][3]]]; + const setChooseValue3 = param => { + state.date3 = param[3]; }; return { @@ -112,8 +138,9 @@ export default createDemo({ openSwitch, closeSwitch, setChooseValue, + setChooseValue1, setChooseValue2, - setChooseValue1 + setChooseValue3 }; } }); diff --git a/src/packages/calendar/doc.md b/src/packages/calendar/doc.md index cf59529bb23c3f03833944b8d6d3b5a1eaa2d99b..2893961081eed8e0ac425f5c0d5eb4592988475d 100644 --- a/src/packages/calendar/doc.md +++ b/src/packages/calendar/doc.md @@ -1,34 +1,212 @@ -# calendar组件 - - ### 介绍 - - 基于 xxxxxxx - - ### 安装 - - - - ## 代码演示 - - ### 基础用法1 - - - - ## API - - ### Props - - | 参数 | 说明 | 类型 | 默认值 | - |--------------|----------------------------------|--------|------------------| - | name | 图标名称或图片链接 | String | - | - | color | 图标颜色 | String | - | - | size | 图标大小，如 '20px' '2em' '2rem' | String | - | - | class-prefix | 类名前缀，用于使用自定义图标 | String | 'nutui-iconfont' | - | tag | HTML 标签 | String | 'i' | - - ### Events - - | 事件名 | 说明 | 回调参数 | - |--------|----------------|--------------| - | click | 点击图标时触发 | event: Event | - \ No newline at end of file +# calendar 组件 + +### 介绍 + +日历，可平铺/弹窗展示 + +### 安装 + +```javascript +import { createApp } from 'vue'; +import { Calendar } from '@nutui/nutui'; + +const app = createApp(); +app.use(Calendar); +``` + +## 代码演示 + +### 基础用法 + +```html + + + + +``` + +```javascript +setup() { + const state: TestCalendarState = reactive({ + isVisible: false, + date: '', + dateWeek: '' + }); + const openSwitch = param => { + state[`${param}`] = true; + }; + const closeSwitch = param => { + state[`${param}`] = false; + }; + const setChooseValue = param => { + state.date = param[3]; + state.dateWeek = param[4]; + }; + return { + ...toRefs(state), + openSwitch, + closeSwitch, + setChooseValue + }; + } +``` + +### 区间选择 + +```html + + + + +``` + +```javascript +setup() { + const state: TestCalendarState = reactive({ + date: ['2019-12-23', '2019-12-26'], + isVisible2: true + }); + const openSwitch = param => { + state[`${param}`] = true; + }; + const closeSwitch = param => { + state[`${param}`] = false; + }; + const setChooseValue= param => { + state.date = [...[param[0][3], param[1][3]]]; + }; + return { + ...toRefs(state), + openSwitch, + closeSwitch, + setChooseValue, + }; + } +``` + +### 自定义日历-自动回填 + +```html + + + + +``` + +```javascript +setup() { + const state: TestCalendarState = reactive({ + date: '', + isVisible: false + }); + const openSwitch = param => { + state[`${param}`] = true; + }; + const closeSwitch = param => { + state[`${param}`] = false; + }; + const setChooseValue = param => { + state.date= param[3]; + }; + return { + ...toRefs(state), + setChooseValue + }; + } +``` + +### 平铺展示 + +```html +
+ +
+``` + +```javascript +setup() { + const state: TestCalendarState = reactive({ + date: '2020-07-08' + }); + const setChooseValue = param => { + state.date = param[3]; + }; + return { + ...toRefs(state), + setChooseValue + }; + } +``` + +### 基础用法 + +```html + +``` + +```javascript +``` + +## API + +### Props + +| 字段 | 说明 | 类型 | 默认值 | +| ----------------- | ------------------------------------------------- | -------------- | --------------- | +| type | 类型，日期选择'one'，区间选择'range' | String | 'one' | +| is-visible | 是否可见 | Boolean | false | +| poppable | 是否弹窗状态展示 | Boolean | true | +| is-auto-back-fill | 自动回填 | Boolean | false | +| title | 显示标题 | String | ‘日期选择’ | +| default-value | 默认值，日期选择 String 格式，区间选择 Array 格式 | String / Array | null | +| start-date | 开始日期， 如果不限制开始日期传 null | String | 今天 | +| end-date | 结束日期，如果不限制结束日期传 null | String | 距离今天 365 天 | + +### Events + +| 事件名 | 说明 | 回调参数 | +| choose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期） +| close | 关闭时触发 | - diff --git a/src/packages/calendar/index.vue b/src/packages/calendar/index.vue index 638cd9ef08058104408851b0dc452b3c342c9be5..711bf05d84b5467b605b0695a45825b32a21be5d 100644 --- a/src/packages/calendar/index.vue +++ b/src/packages/calendar/index.vue @@ -1,14 +1,16 @@