init
This commit is contained in:
王鹏
13
uni_modules/uni-grid/changelog.md
Normal file
13
uni_modules/uni-grid/changelog.md
Normal file
@@ -0,0 +1,13 @@
|
||||
## 1.4.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-grid](https://uniapp.dcloud.io/component/uniui/uni-grid)
|
||||
## 1.3.2（2021-11-09）
|
||||
- 新增 提供组件设计资源，组件样式调整
|
||||
## 1.3.1（2021-07-30）
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.3.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.2.4（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.2.3（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
127
uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue
Normal file
127
uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
|
||||
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
|
||||
:style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
|
||||
class="uni-grid-item__box" @click="_onClick">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* GridItem 宫格
|
||||
* @description 宫格组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=27
|
||||
* @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
|
||||
*/
|
||||
export default {
|
||||
name: 'UniGridItem',
|
||||
inject: ['grid'],
|
||||
props: {
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
column: 0,
|
||||
showBorder: true,
|
||||
square: true,
|
||||
highlight: true,
|
||||
left: 0,
|
||||
top: 0,
|
||||
openNum: 2,
|
||||
width: 0,
|
||||
borderColor: '#e5e5e5'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.column = this.grid.column
|
||||
this.showBorder = this.grid.showBorder
|
||||
this.square = this.grid.square
|
||||
this.highlight = this.grid.highlight
|
||||
this.top = this.hor === 0 ? this.grid.hor : this.hor
|
||||
this.left = this.ver === 0 ? this.grid.ver : this.ver
|
||||
this.borderColor = this.grid.borderColor
|
||||
this.grid.children.push(this)
|
||||
// this.grid.init()
|
||||
this.width = this.grid.width
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.grid.children.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.grid.children.splice(index, 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.grid.change({
|
||||
detail: {
|
||||
index: this.index
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.uni-grid-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 100%;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-grid-item__box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
}
|
||||
|
||||
.uni-grid-item--border {
|
||||
position: relative;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-bottom-color: #D2D2D2;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0.5px;
|
||||
border-right-color: #D2D2D2;
|
||||
border-right-style: solid;
|
||||
border-right-width: 0.5px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 0;
|
||||
border-bottom: 1px #D2D2D2 solid;
|
||||
border-right: 1px #D2D2D2 solid;
|
||||
/* #endif */
|
||||
}
|
||||
.uni-grid-item--border-top {
|
||||
position: relative;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-top-color: #D2D2D2;
|
||||
border-top-style: solid;
|
||||
border-top-width: 0.5px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
border-top: 1px #D2D2D2 solid;
|
||||
z-index: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
.uni-highlight:active {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
142
uni_modules/uni-grid/components/uni-grid/uni-grid.vue
Normal file
142
uni_modules/uni-grid/components/uni-grid/uni-grid.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="uni-grid-wrap">
|
||||
<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* Grid 宫格
|
||||
* @description 宫格组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=27
|
||||
* @property {Number} column 每列显示个数
|
||||
* @property {String} borderColor 边框颜色
|
||||
* @property {Boolean} showBorder 是否显示边框
|
||||
* @property {Boolean} square 是否方形显示
|
||||
* @property {Boolean} Boolean 点击背景是否高亮
|
||||
* @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
|
||||
*/
|
||||
export default {
|
||||
name: 'UniGrid',
|
||||
emits:['change'],
|
||||
props: {
|
||||
// 每列显示个数
|
||||
column: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
// 是否显示边框
|
||||
showBorder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#D2D2D2'
|
||||
},
|
||||
// 是否正方形显示,默认为 true
|
||||
square: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
highlight: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
grid: this
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
return {
|
||||
elId,
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.children = []
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
setTimeout(() => {
|
||||
this._getSize((width) => {
|
||||
this.children.forEach((item, index) => {
|
||||
item.width = width
|
||||
})
|
||||
})
|
||||
}, 50)
|
||||
},
|
||||
change(e) {
|
||||
this.$emit('change', e)
|
||||
},
|
||||
_getSize(fn) {
|
||||
// #ifndef APP-NVUE
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select(`#${this.elId}`)
|
||||
.boundingClientRect()
|
||||
.exec(ret => {
|
||||
this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
|
||||
fn(this.width)
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
|
||||
this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
|
||||
fn(this.width)
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.uni-grid-wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
/* #ifdef H5 */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-grid {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
// flex: 1;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.uni-grid--border {
|
||||
position: relative;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-left-color: #D2D2D2;
|
||||
border-left-style: solid;
|
||||
border-left-width: 0.5px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 1;
|
||||
border-left: 1px #D2D2D2 solid;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
86
uni_modules/uni-grid/package.json
Normal file
86
uni_modules/uni-grid/package.json
Normal file
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"id": "uni-grid",
|
||||
"displayName": "uni-grid 宫格",
|
||||
"version": "1.4.0",
|
||||
"description": "Grid 宫格组件，提供移动端常见的宫格布局，如九宫格。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"九宫格",
|
||||
"表格"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss","uni-icons"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
uni_modules/uni-grid/readme.md
Normal file
11
uni_modules/uni-grid/readme.md
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
## Grid 宫格
|
||||
> **组件名：uni-grid**
|
||||
> 代码块： `uGrid`
|
||||
|
||||
|
||||
宫格组件。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-grid)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
Reference in New Issue
Block a user