Skip to content

U
uml-demo

thirdlucky / uml-demo

通知 7
Star 0
Fork 0
U
uml-demo

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 a54e032a 编写于 作者: S shenjizhe
浏览文件
操作

1

上级 fb6fecc2
隐藏空白更改
内联 并排
Showing with 688 addition and 0 deletion
uni_modules/thirdlucky-data-form/changelog.md 0 → 100644
浏览文件 @ a54e032a
## 1.0.11（2021-11-19）
去掉了本身的样式
## 1.0.10（2021-11-19）
样式
## 1.0.9（2021-11-19）
样式
## 1.0.8（2021-11-19）
测试
## 1.0.7（2021-11-19）
样式名称冲突问题
## 1.0.6（2021-11-19）
更新样式
## 1.0.5（2021-11-19）
样式
## 1.0.4（2021-11-19）
更新样式
## 1.0.3（2021-11-19）
优化样式
## 1.0.2（2021-11-19）
不需要强制formData属性
## 1.0.1（2021-11-19）
更新文档
## 1.0.0（2021-11-19）
初步版本
uni_modules/thirdlucky-data-form/components/thirdlucky-data-form/thirdlucky-data-form.vue 0 → 100644
浏览文件 @ a54e032a
<template>
<view class="form-box">
<scroll-view class="form-container" scroll-y="true">
<uni-forms ref="form" :modelValue="formData" :rules="rules">
<uni-forms-item class="form-item" v-for="(column, index) in columns" :key="index" :label="column.info">
<switch class="item-css" v-if="checkType('switch', column.type)" :checked="formData[column.name]"></switch>
<slider class="item-css" v-if="checkType('slider', column.type)" :value="formData[column.name]" min="0" max="100" show-value />
<editor v-if="checkType('editor', column.type)" v-model="formData[column.name]" class="editor" :placeholder="column.tips"></editor>
<uni-datetime-picker class="item-css" v-if="checkType('date', column.type)" type="date" :value="formData[column.name]" />
<uni-datetime-picker class="item-css" v-if="checkType('datetime', column.type)" type="datetime" :value="formData[column.name]" />
<uni-easyinput class="item-css" v-if="checkType('uni-easyinput', column.type)" :type="column.type" v-model="formData[column.name]" :placeholder="column.tips" />
</uni-forms-item>
</uni-forms>
</scroll-view>
<view class="button-container">
<button class="form-button" @click="confirm('submit')" type="primary">提交</button>
<button class="form-button" @click="confirm('cancel')" type="warn">取消</button>
</view>
</view>
</template>
<script>
export default {
emits: ['confirm'],
props: {
name: 'uForm',
formData: {
type: Object,
required: false,
default() {
return {};
}
},
rules: {
type: Object,
required: false,
default() {
return {};
}
},
columns: {
type: Array,
required: true,
default() {
return [];
}
}
},
data() {
return {};
},
methods: {
checkType(controlType, type) {
if (controlType == 'uni-easyinput') {
switch (type) {
case 'text':
case 'textarea':
case 'password':
case 'number':
case 'idcard':
case 'digit':
return true;
default:
return false;
}
} else if (controlType == type) {
return true;
} else {
return false;
}
},
comfirm(action) {
let data = this.formData;
this.$refs.form
// .validate(runles)
.then(res => {
this.$emit('confirm', action, data);
})
.catch(err => {
this.$emit('confirm', 'error', data);
});
}
}
};
</script>
<style lang="scss">
$padw: 50rpx;
$pads: 30rpx;
.editor {
width: 100%;
background-color: #e6e6e6;
font-size: 0.75em;
}
.form-box {
margin-top: $pads;
}
.form-container {
margin: $padw $padw 120rpx $pads;
height: 80%;
}
.button-container {
display: flex;
flex-direction: row;
position: absolute;
bottom: 40rpx;
width: 100%;
height: 15%;
}
.form-button {
flex: 1;
border-radius: 0;
}
.form-item {
padding-right: $padw;
font-size: 0.75em;
}
.item-css {
font-size: 0.75em;
}
</style>
uni_modules/thirdlucky-data-form/package.json 0 → 100644
浏览文件 @ a54e032a
{
"id": "thirdlucky-data-form",
"displayName": "thirdlucky-data-form",
"version": "1.0.11",
"description": "thirdlucky-data-form",
"keywords": [
"thirdlucky-data-form"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
uni_modules/thirdlucky-data-form/readme.md 0 → 100644
浏览文件 @ a54e032a
# thirdlucky-data-form
## DataForm 数据驱动的表单
> **组件名：thirdlucky-data-form**
> 代码块： `uDataForm`
本组件是基于uni-app基础组件uni-form的封装。本组件要解决问题包括：
1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 本组件为数据驱动，目的是快速投入使用，只可通过 style 覆盖有限样式，不支持自定义更多样式
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另行文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
设置 `columns` 属性后，组件会通过数据渲染出对应的内容
```html
<template>
<view>
<thirdlucky-data-form :columns="columns" @confirm="confirm"></thirdlucky-data-form>
</view>
</template>
```
```javascript
<script>
export default {
data() {
return {
columns: [
{
name: 'calendarType',
info: '类型',
tips: '请输入类型',
type: 'text'
},
{
name: 'amount',
info: '金额',
tips: '请输入金额',
type: 'slider'
},
{
name: 'entryAmount',
info: '入账金额',
tips: '0.00',
type: 'digit'
}
]
};
},
methods: {
confirm(action, data) {
console.log("行为:" + action + ";数据:" + data);
}
}
};
</script>
```
## API
### DataTable Props
| 属性名| 类型 |可选值 | 默认值| 说明 |示例 |
| :-: | :-: |:-: |:-: | :-: |:-: |
|columns|Array | |- |必填，列头 |columns: [{name: 'calendarType',info: '类型',tips: '请输入类型',type: 'text'}] | |
#### Localdata Options
### DataTable Events
| 事件名| 事件说明 | 返回参数 |
| :-: | :-: | :-: |
| @confirm| 表单提交| action:行为（submit-确认,cancel-取消，错误-error），data:被修改的数据 |
## 组件示例
点击查看：[https://codechina.csdn.net/thirdlucky/test.git](https://codechina.csdn.net/thirdlucky/test.git)
\ No newline at end of file
uni_modules/thirdlucky-data-table/changelog.md 0 → 100644
浏览文件 @ a54e032a
## 1.0.9（2021-11-23）
允许数据为空
## 1.0.8（2021-11-19）
调整布局
## 1.0.7（2021-11-18）
文档修正
## 1.0.6（2021-11-16）
修改columns 成数组，可以添加多个属性
## 1.0.5（2021-11-15）
修改了颜色定义
## 1.0.4（2021-11-15）
修改了按钮的排列方式
## 1.0.3（2021-11-13）
更新了模式
## 1.0.2（2021-11-13）
更改了说明文件
## 1.0.1（2021-11-13）
1. 修正了columns为json格式
2. datas的格式为json数组，属性key和column对应
3. 默认增加编辑和删除按钮
## 1.0.0（2021-11-13）
测试版本
## 0.0.1（2021-11-11）
- 第一次更新
\ No newline at end of file
uni_modules/thirdlucky-data-table/components/thirdlucky-data-table/thirdlucky-data-table.vue 0 → 100644
浏览文件 @ a54e032a
<template>
<scroll-view scroll-x="true" scroll-y="true">
<uni-table class="table-main-container" :border="border" :stripe="stripe" :emptyText="emptyText" :type="type" :rowKey="rowKey" :loading="loading">
<!-- 表头行 -->
<uni-tr class="data-row" @mousedown="onMouseDown">
<uni-th class="column-css" v-for="(col, key, index) in columns" :key="key">{{ col.info }}</uni-th>
<uni-th class="column-css">设置</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr class="data-row" v-for="(row, rindex) in datas" :key="rindex" @mousedown.native="onMouseDown(rindex)">
<uni-td v-for="(col, key, index) in columns" :key="index">{{ row[col.name] }}</uni-td>
<uni-td class="button-container">
<view v-for="(button, index, id) in buttons" :key="id">
<button :style="{ 'background-color': button.color }" @click="onClick(rindex, button.id)" class="button">{{ button.name }}</button>
</view>
</uni-td>
</uni-tr>
</uni-table>
</scroll-view>
</template>
<script>
/**
* DataTable 数据表格
* @description 输入数据列和数据可以直接绑定数据
* @tutorial https://ext.dcloud.net.cn/plugin?id=6656
* @property {Object} columns json格式表示属性的key和显示列名 {"name":"姓名","info":"信息"}
* @property {Array} datas json格式数组 [{"name":"小明","info":"班长"},{"name":"小红","info":"学委"}]
* @property {Array} buttons 按钮,默认提供编辑和删除按钮 [{"id":"edit","name":"编辑"}]
* @event {click( rindex, id)} 按钮点击事件 rindex:行索引,id按钮的id
*/
export default {
emits: ['selected'],
props: {
name: 'utab',
// 列信息
columns: {
type: Array,
required: true,
default() {
return [
{
name: 'name',
info: '姓名',
tips: '请输入姓名',
type: 'text'
}
];
}
},
// 数据信息
datas: {
type: Array,
required: false
},
// 常用按钮
buttons: {
type: Array,
required: false,
default() {
return [
{
id: 'edit',
name: '编辑',
color: '#1890ff'
},
{
id: 'delete',
name: '删除',
color: '#ff0000'
}
];
}
},
// 是否有竖线
border: {
type: Boolean,
default: true
},
// 是否显示斑马线
stripe: {
type: Boolean,
default: true
},
// 多选
type: {
type: String,
default: ''
},
// 没有更多数据
emptyText: {
type: String,
default: '没有更多数据'
},
loading: {
type: Boolean,
default: false
},
rowKey: {
type: String,
default: ''
}
},
data() {
return {};
},
methods: {
onClick(rindex, id) {
this.$emit('selected', rindex, id, this.datas[rindex]);
},
onMouseDown(rindex) {
this.$emit('selected', rindex, 'select', this.datas[rindex]);
}
}
};
</script>
<style lang="scss">
$red-color: #ff0000;
$blue-color: #2d8cf0;
$green-color: #47c789;
$white-color: #ffffff;
$gray-color: #f2f2f2;
$black-color: #3f3f3f;
.table-main-container {
min-width: 450rpx;
max-width: 750rpx;
}
.data-table {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.data-row {
flex: 1;
margin: 0;
}
.column-css {
background-color: $blue-color;
color: $white-color;
bold: true;
font-size: 0.75em;
}
.button-container {
display: flex;
justify-content: flex-start;
}
.button {
color: $white-color;
font-size: 1em;
padding: 0 1.34em;
margin-left: 25rpx;
}
</style>
uni_modules/thirdlucky-data-table/package.json 0 → 100644
浏览文件 @ a54e032a
{
"id": "thirdlucky-data-table",
"displayName": "thirdlucky-data-table",
"version": "1.0.9",
"description": "数据绑定的 table组件",
"keywords": [
"udatatab"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
uni_modules/thirdlucky-data-table/readme.md 0 → 100644
浏览文件 @ a54e032a
# thirdlucky-data-table
## DataTable 数据驱动的表格
> **组件名：thirdlucky-data-table**
> 代码块： `uDataTable`
本组件是基于uni-app基础组件uni-table的封装。本组件要解决问题包括：
1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 本组件为数据驱动，目的是快速投入使用，只可通过 style 覆盖有限样式，不支持自定义更多样式
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另行文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
设置 `columns`和 `datas` 属性后，组件会通过数据渲染出对应的内容
```html
<template>
<view>
<thirdlucky-data-table @click="onClick" :columns="columns" :datas="datas"></thirdlucky-data-table>
</view>
</template>
```
```javascript
<script>
export default {
data() {
return {
columns: [
{
name: 'name',
info: 姓名',
},
{
name: 'age',
info: '年龄',
},
{
name: 'sex',
info: '性别',
}
],
datas: [{
"name": '张三',
"age": 18,
"sex": '男'
},
{
"name": '李四',
"age": 20,
"sex": '男'
},
{
"name": '小红',
"age": 17,
"sex": '女'
},
]
};
},
methods: {
onClick(rindex, id) {
console.log("点击了:" + id + ";索引:" + rindex);
}
}
};
</script>
```
## API
### DataTable Props
| 属性名| 类型 |可选值 | 默认值| 说明 |示例 |
| :-: | :-: |:-: |:-: | :-: |:-: |
|columns|Array | |- |必填，列头 |columns: [{name: 'name',info: 姓名',},{name: 'age',info: '年龄',},{name: 'sex',info: '性别',}] |
|datas |Array |- |- |必填，行数据 |- |
|buttons| Array |- |默认值 |按钮，默认包括编辑和删除按钮 |[{id: "edit",name: "编辑"}, {id: "delete",name: "删除"}] |
#### Localdata Options
### DataTable Events
| 事件名| 事件说明 | 返回参数 |
| :-: | :-: | :-: |
| @click| 按钮被点击| rindex:按钮所在数据的行索引，id:按钮的id |
## 组件示例
点击查看：[https://codechina.csdn.net/thirdlucky/thirdlucky-data-table-demo.git](https://codechina.csdn.net/thirdlucky/thirdlucky-data-table-demo.git)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或