dc-wiew使用文档

dc-view是仿照iview以及element，使用vue3语法写成的，适用于vue3的组件库。

演示地址: dc-view

使用步骤

npm i dc-view          // 安装
import DcView from "dc-view";   // 导入
import 'dc-view/lib/dc-view.css';    // 导入css样式
createApp(App).use(DcView).mount('#app');   // 使用

源码地址 (源码中有各个组件使用案例)

http://gitee.com/view-group/dc-view

目录

dc-menu

dc-tooltip

dc-ellipsis

dc-form

dc-date-picker

dc-dropdown

dc-button

dc-transition

DcMessage

dc-tabs

---

dc-menu

<template>
    <dc-menu :active-index="state.activeIndex" @changeIndex="value => state.activeIndex = value" :fold="state.fold">
        <template v-for="item in state.menuList" :key="item.title">
            <dc-sub-menu v-if="item.children" :index="item.title" >
                <template #icon>
                    <i :class="`iconfont icon-riqi-dc`"></i>
                </template>
                <template #title>
                    <div>{{item.title}}</div>
                </template>
                <dc-menu-item v-for="item2 in item.children" :key="item2.title" :index="item2.title">
                    <template #icon>
                        <i :class="`iconfont icon-riqi-dc`"></i>
                    </template>
                    <div>{{item2.title}}</div>
                </dc-menu-item>
            </dc-sub-menu>
            <dc-menu-item v-else :index="item.title">
                <template #icon>
                    <i :class="`iconfont icon-riqi-dc`"></i>
                </template>
                <div>{{item.title}}</div>
            </dc-menu-item>
        </template>
    </dc-menu>
</template>

<script setup>
import { reactive } from "vue";
const state = reactive({
    menuList: [
        {
            title: "菜单1"
        },
        {
            title: "菜单2"
        },
        {
            title: "菜单3"
        },
        {
            title: "菜单4",
            children: [
                {
                    title: "菜单4-1"
                },
                {
                    title: "菜单4-2"
                },
                {
                    title: "菜单4-3"
                }
            ]
        }
    ],
    activeIndex: "",
    fold: false
})
</script>

 dc-menu Props

属性	说明	类型	默认值
active-index	选中的菜单的index	String	-
fold	是否折叠菜单	Boolean	false

        注意: 选中某个菜单,只能通过改变active-index来实现

dc-menu Event

事件名	说明	返回值
changeIndex	选中菜单时触发	index

dc-sub-menu Props

属性	说明	类型	默认值
index	唯一表示	String	-

dc-sub-menu Slots

名称	说明
title	菜单标题
icon	菜单图标

dc-menu-item Props

属性	说明	类型	默认值
index	唯一表示	String	-

dc-menu-item Slots

名称	说明
icon	菜单图标

dc-tooltip

<dc-tooltip 
    content="这是提示文字" 
    :max-width="100" 
    placement="bottom" 
    :disabled="false"
>
    <div>这是一段文字</div>
</dc-tooltip>

dc-tooltip Props

属性	说明	类型	默认值
content	提示的内容	String	-
disabled	是否禁用提示框	Boolean	false
placement	提示框出现的位置	String	bottom
max-width	最大宽度，超出最大值后， 文本将自动换行	Number	250

dc-tooltip Slots

名称	说明
content	提示框的内容，定义此 slot 时，会覆盖 props content。

dc-ellipsis

<template>
    <div style="width: 200px">
        <dc-ellipsis :max-width="300" :text="state.text" placement="right" :line="2" :height="100" :length="10" />
    </div>
</template>

<script setup>
import { reactive } from "vue"
const state = reactive({
    text: "史蒂夫·乔布斯（英语：Steve Jobs），是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。"
})
</script>

dc-ellipsis Props

属性	说明	类型	默认值
text	文本	String	-
length	按照指定长度截取	Number	-
height	限制高度截取	Number	-
line	限制行数截取	Number	1
tooltip	是否使用tooltip显示	Boolean	false
placement	tooltip的placement	String	bottom
max-width	tooltip的max-width	Number	250

 说明: tooltip为false是文本省略时,tooltip提示,没有省略时,则不显示提示,

          tooltip为true提示一直存在

dc-form

template>
    <button type="submit" class="mr-10" @click="validate">验证</button>
    <button type="submit" class="mr-10" @click="validateField">验证姓名</button>
    <button type="submit" class="mr-10" @click="resetFields">重置</button>
    <dc-form class="mt-20" ref="form" :inline="state.inline" :label-width="70" :model="state.form" :rules="state.rules" :required="true">
        <dc-form-item label="姓名" prop="name" :required="false">
            <dc-input clearable placeholder="请输入姓名" type="text" v-model="state.form.name" />
        </dc-form-item>
        <dc-form-item label="年龄" required prop="age">
            <dc-input placeholder="请输入年龄" type="text" v-model="state.form.age" />
        </dc-form-item>
        <dc-form-item label-align="flex-start" label="选择框" prop="date">
            <dc-date-picker transfer clearable @on-change="changeDate"></dc-date-picker>
        </dc-form-item>
    </dc-form>
</template>

<script setup>
    import { reactive, ref } from "vue";
    const state = reactive({
        form: {
            name: "",
            age: "",
            date: ""
        },
        rules: {
            name: [
                { required: true, message: "请输入姓名", trigger: "blur"},
            ],
            age: [
                { required: true, message: "请输入性别", trigger: "blur" }
            ],
            date: [
                { required: true, trigger: "change", message: "请选择日期" }
            ],
        },
        inline: false
    })
    const form = ref(null);
    const validate = () => {
        form.value.validate(valid => {
            console.log("整个表单进行验证");
        });
    }
    const validateField = () => {
        form.value.validateField("name").then(valid => {
            console.log("表单某项进行验证");
        });
    }
    const resetFields = () => {
        form.value.resetFields(); // 重置表单
    }
    function changeDate(date) {
        state.form.date = date
    }
</script>

dc-form Props

属性	说明	类型	默认值
model	表单数据对象	Object	-
rules	表单验证规则 具体配置查看 async-validator	Object	-
labelWidth	表单域标签的宽度	Number	-
inline	是否开启行内表单模式	Boolean	false
autocomplete	原生的 autocomplete 属性	String	off

dc-form Methods

方法名	说明	参数
validate	对整个表单进行校验	callback
validateField	对部分表单字段进行校验	callback
resetFields	对整个表单进行重置	-

dc-form-item Props

属性	说明	类型	默认值
label	标签文本	String	-
prop	对应表单域 model 里的字段	String	-
label-width	表单域标签的的宽度	Number	-
required	是否必填，如不设置，则会根据校验规则自动生成	Boolean	false

dc-form-item Slots

名称	说明
label	label的内容

dc-date-picker

dc-date-picker Props

属性	说明	类型	默认值
type	显示类型，可选值为 date、daterange	String	date
modelValue	选择器绑定的时间,可以使用v-model	Array	[]
clearable	是否显示清除按钮	Boolean	false
format	展示日期的格式	Array	["YYYY-MM-DD", "YYYY-MM-DD"]
placeholder	占位文本	String	-
separator	开启后，左右面板不联动，仅在 daterange下可用	Boolean	false
placement	日期选择器出现的位置	String	"bottom-start"
transfer	是否将弹层放置于 body 内	Boolean	false

dc-dropdown

dc-dropdown Props

属性	说明	类型	默认值
trigger	触发方式，可选值为 hover（悬停）click（点击）	String	"hover"
placement	下拉菜单出现的位置	String	"bottom"
transfer	是否将弹层放置于 body 内	Boolean	false

dc-dropdown Event

事件名	说明	返回值
on-click	点击菜单项时触发	dc-dromdown-item 的 name 值

dc-dropdown Slots

名称	说明
list	列表内容

dc-dropdown-item Props

属性	说明	类型	默认值
name	用来标识这一项	String	-
disabled	禁用这一项	Boolean	false
selected	选中这一项	Boolean	false

dc-button

dc-button Props

属性	说明	类型	默认值
type	按钮类型	String	"default"
shape	按钮形状,可选"circle"	String	-
size	按钮大小	String	"default"
ghost	幽灵属性，使按钮背景透明	Boolean	false
long	开启后，按钮的长度为 100%	Boolean	false
disable	禁用按钮	Boolean	false
loading	加载中	Boolean	false
html-type	设置 button 原生的 type	Boolean	"button"

dc-transition

dc-transition Props

属性	说明	类型	默认值
type	动画类型	String	opacity
time	动画持续时间	Number	0.3

DcMessage

通过直接调用以下方法来使用组件：

import { DcMessage } from "dc-view";

DcMessage.info();

DcMessage.success();

DcMessage.warning();

DcMessage.error();

DcMessage.loading();

参数 config 可以是字符串或对象，当为字符串时，直接显示内容，当为对象时，具体说明如下：

属性	说明	类型	默认值
content	提示内容	String	-
duration	自动关闭的延时,单位秒,不关闭可以写 0	Number	1.5
onClose	关闭时的回调	Function	-
closable	是否显示关闭按钮	Boolean	false
background	是否显示背景颜色	Boolean	false

另外提供了全局配置和全局销毁的方法：

DcMessage.config(options);

DcMessage.destroy(); 

属性	说明	类型	默认值
top	提示组件距离顶部的距离,单位像素	Number	24
duration	默认自动关闭的延时,单位秒	Number	1.5
background	是否默认显示背景	Boolean	false

dc-tabs

dc-tabs props

属性	说明	类型	默认值
modelValue	当前激活 tab 面板的 name， 可以使用 v-model 双向绑定数据	string	-

dc-tabs events

事件名	说明	返回值
on-click	tab 被点击时触发	name

dc-tab-pane props

属性	说明	类型	默认值
name	用于标识当前面板	String	-
label	选项卡头显示文字	Sting	-
disabled	禁用当前选项卡	Boolean	false