xyf_vue3

https://cli.vuejs.org/zh/guide/css.html#css-modules cli 地址

$3

使用ReportBtn 包裹需要埋点的按钮
初始话时可以传递参数
app.use(youdi_w3,{
comOptions:{
version:'1313'
}
});

``html
:params="{
a: 'fas'
}"
>

测试


`


$3

获取子组件的方法
`js
const MyTableRef = ref(null) // 定义ref
MyTableRef.value.fetchData()
`
fieldArray 搜索组件的配置参数 Array
reqParams 处理搜索时候的参数 Functon
searchReset 点击重置时会触发这个事件 click
req 获取table数据的函数 function
dealList 处理返回的dataList数据
showSearch booolean 是否展示搜索
showPage 是否展示分页
dealTotal 获取total总页数

常用插槽
searchSlot 搜索的插槽
searchOperation 搜索按钮插槽s

$3

isDetail 表示是否显示上传按钮
`html
:initList='fileList'
:isDetail='false'
:labelCol='{
span: 4
}'
:wrapperCol='{
span: 20
}'
@imgChange='imgChange'
>
`
`js
const fileList = reactive([
{
uid: '-1',
name: 'image.png',
status: 'done',
url: 'https://workyd.com/image/yhesj_xcs/placeHolder.png',
},

{
uid: '-5',
name: 'image.png',
status: 'error',
},
])
`

$3

`html



`

`js
//copy 表示是否需要复制
const detail = {
name: "张阿三",
age: 14,
};
const formArray = [
{
label: "名字",
attr: "name",
slot: true,
},
{
label: "年龄",
attr: "age",
},
{
label: "照片",
attr: "image",
type: "image",
},
{
label: "性别",
attr: "sex",
type: "select",
options: [
{
name: "男",
value: "1",
},
{
name: "女",
value: "0",
},
],
},
];
`

$3

`html

`

$3

`html
ref="formDetail"
:rules="rules"
:formField="formField"
:initData="initData"
:disabled="false" // 表单是否可编辑
:labelCol="{
span: 4
}"
:wrapperCol="{
span: 20
}"
@dataChange="dataChange"
>


`

`
initData 表示初始值
rules 规则验证
dataChange 每次数据改变时会触发
// 组件暴露方法
setFormVal 直接修改form表单的整个值
setVal 修改某个属性的值
getForm 获取表单值
checkField 进行表单校验 异步操作
resetValue 重置表单
actionUrl 图片上传组件的路径
`

`js 配置项说明
const formField = [
{
type: "input",
attr: "name",
label: "姓名",
disabled: false, //是否表单可编辑
slot: true, // 表示启用插槽
},
{
type: "radio", // 单选
attr: "sex2",
label: "性别",
options: [
{
name: "男",
value: "1",
},
{
name: "女",
value: "0",
},
],
},
{
type: "input",
attr: "name",
label: "姓名",
},
{
type: "adress",
attr: "adress",
label: "地址",
width: "200",
},
{
type: "time",
attr: "time",
label: "时间",
},
{
type: "image",
attr: "image",
label: "图片",
// limit: 1 限制图片上传数量
},

{
type: "timeRange",
attr: "timeRange",
label: "时间范围",
},

{
type: "select",
attr: "sex",
label: "性别",
// mode:"multiple, //表示多选
async fun() {
return new Promise((res) => {
setTimeout(() => {
res([
{
name: "男",
value: "1",
},
{
name: "女",
value: "0",
},
]);
}, 2000);
});
},
options: [],
},
{
attr: "ceshiSlot", //自定义插槽不需要label
slot: true,
span: 24,
},
{
type: "select",
attr: "fafd",
label: "姓名",
options: [
{
name: "张三",
value: "131",
},
],
},
];
``