Browse Source

upd: noticebar

wangyue217 5 years ago
parent
commit
beaa77e9bc

+ 10 - 0
src/config.js

@@ -334,6 +334,16 @@ module.exports = {
           show: true,
           desc: '标签栏组件',
           author: 'Drjingfubo'
+        },
+        {
+          version: '3.0.0',
+          name: 'NoticeBar',
+          type: 'component',
+          cName: '公告栏',
+          desc: '用于循环播放展示一组消息通知',
+          sort: 5,
+          show: true,
+          author: 'wangyue92'
         }
       ]
     },

+ 23 - 0
src/packages/noticebar/demo.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-noticebar
+        text="华为畅享9新品即将上市,活动期间0元预约可参与抽奖,赢HUAWEI WATCH等好礼,更多产品信息请持续关注!"
+      ></nut-noticebar>
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('noticebar');
+export default createDemo({
+  props: {},
+  setup() {
+    return {};
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

+ 34 - 0
src/packages/noticebar/doc.md

@@ -0,0 +1,34 @@
+#  noticebar组件
+
+    ### 介绍
+    
+    基于 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 |
+    

+ 2 - 0
src/packages/noticebar/index.scss

@@ -0,0 +1,2 @@
+.nut-noticebar {
+}

+ 42 - 0
src/packages/noticebar/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <view :class="classes">
+    <view>{{ name }}</view>
+    <view>{{ txt }}</view>
+  </view>
+</template>
+<script lang="ts">
+import { toRefs } from 'vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('noticebar');
+
+export default create({
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    txt: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {},
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    console.log('componentName', componentName);
+
+    const { name, txt } = toRefs(props);
+
+    const handleClick = (event: Event) => {
+      emit('click', event);
+    };
+
+    return { name, txt, handleClick };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>