-
Notifications
You must be signed in to change notification settings - Fork 136
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
jry
committed
Aug 27, 2024
1 parent
01dee26
commit b3ff2ae
Showing
15 changed files
with
532 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| /* | ||
| * @Author : LQ,jry | ||
| * @Description : | ||
| * @version : 3.0 | ||
| * @Date : 2021-08-20 16:44:21 | ||
| * @LastAuthor : jry | ||
| * @lastTime : 2024-08-20 14:20:58 | ||
| * @FilePath : /uview-plus/libs/config/props/col.js | ||
| */ | ||
| export default { | ||
| // col 组件 | ||
| col: { | ||
| span: '12', | ||
| offset: '0', | ||
| justify: 'start', | ||
| align: 'stretch', | ||
| textAlign: 'left' | ||
| } | ||
| } as UTSJSONObject |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { defineMixin } from '../../libs/vue' | ||
| import defProps from './col' | ||
| let crtProp = defProps['col'] as UTSJSONObject | ||
|
|
||
| export const propsCol = defineMixin({ | ||
| props: { | ||
| // 占父容器宽度的多少等分，总分为12份 | ||
| span: { | ||
| type: [String, Number], | ||
| default: crtProp['span'] | ||
| }, | ||
| // 指定栅格左侧的间隔数(总12栏) | ||
| offset: { | ||
| type: [String, Number], | ||
| default: crtProp['offset'] | ||
| }, | ||
| // 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) | ||
| justify: { | ||
| type: String, | ||
| default: crtProp['justify'] | ||
| }, | ||
| // 垂直对齐方式，可选值为top、center、bottom、stretch | ||
| align: { | ||
| type: String, | ||
| default: crtProp['align'] | ||
| }, | ||
| // 文字对齐方式 | ||
| textAlign: { | ||
| type: String, | ||
| default: crtProp['textAlign'] | ||
| } | ||
| } | ||
| }) |
170 changes: 170 additions & 0 deletions
170
src/uni_modules/uview-plus/components/up-col/up-col.uvue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| <template> | ||
| <view | ||
| class="up-col" | ||
| ref="up-col" | ||
| :class="[ | ||
| 'up-col-' + span | ||
| ]" | ||
| :style="[colStyle]" | ||
| @tap="clickHandler" | ||
| > | ||
| <slot></slot> | ||
| </view> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { propsCol } from './props'; | ||
| import { mpMixin } from '../../libs/mixin/mpMixin'; | ||
| import { mixin } from '../../libs/mixin/mixin'; | ||
| import { addStyle, addUnit, deepMerge, getPx, getParentData } from '../../libs/function/index'; | ||
| /** | ||
| * CodeInput 栅格系统的列 | ||
| * @description 该组件一般用于Layout 布局 通过基础的 12 分栏，迅速简便地创建布局 | ||
| * @tutorial https://ijry.github.io/uview-plus/components/Layout.html | ||
| * @property {String | Number} span 栅格占据的列数，总12等份 (默认 12 ) | ||
| * @property {String | Number} offset 分栏左边偏移，计算方式与span相同 (默认 0 ) | ||
| * @property {String} justify 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) (默认 'start' ) | ||
| * @property {String} align 垂直对齐方式，可选值为top、center、bottom、stretch (默认 'stretch' ) | ||
| * @property {String} textAlign 文字水平对齐方式 (默认 'left' ) | ||
| * @property {Object} customStyle 定义需要用到的外部样式 | ||
| * @event {Function} click col被点击，会阻止事件冒泡到row | ||
| * @example <up-col span="3" offset="3" > <view class="demo-layout bg-purple"></view> </up-col> | ||
| */ | ||
| export default { | ||
| name: 'up-col', | ||
| mixins: [mpMixin, mixin, propsCol], | ||
| data() { | ||
| return { | ||
| width: 0, | ||
| parent: null as ComponentPublicInstance|null, | ||
| parentData: { | ||
| gutter: 0 | ||
| } as UTSJSONObject, | ||
| gridNum: 12 | ||
| } | ||
| }, | ||
| // 微信小程序中 options 选项 | ||
| // #ifdef MP-WEIXIN | ||
| options: { | ||
| virtualHost: true // 将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等 | ||
| }, | ||
| // #endif | ||
| computed: { | ||
| uJustify(): string { | ||
| if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify | ||
| else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify | ||
| else return this.justify | ||
| }, | ||
| uAlignItem(): string { | ||
| if (this.align == 'top') return 'flex-start' | ||
| if (this.align == 'bottom') return 'flex-end' | ||
| else return this.align | ||
| }, | ||
| colStyle(): any { | ||
| let pct = 100 / this.gridNum * parseInt(this.span.toString()); | ||
| const style = { | ||
| // 这里写成"padding: 0 10px"的形式是因为nvue的需要 | ||
| paddingLeft: addUnit(parseInt(getPx(this.parentData['gutter'].toString()))/2), | ||
| paddingRight: addUnit(parseInt(getPx(this.parentData['gutter'].toString()))/2), | ||
| alignItems: this.uAlignItem, | ||
| justifyContent: this.uJustify, | ||
| textAlign: this.textAlign, | ||
| flex: `0 0 ${pct.toString()}%`, | ||
| marginLeft: (100 / 12 * parseInt(this.offset.toString())).toString() + '%' | ||
| } | ||
| return deepMerge(style, addStyle(this.customStyle)) | ||
| } | ||
| }, | ||
| mounted() { | ||
| this.init() | ||
| }, | ||
| emits: ["click"], | ||
| methods: { | ||
| init(): void { | ||
| // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用 | ||
| this.updateParentData() | ||
| console.log(this.parent) | ||
| // this?.parent?.getComponentWidth().then((width: number|null) => { | ||
| // // this.width = parseInt(width.toString()) | ||
| // // // console.log(this.width) | ||
| // }) | ||
| }, | ||
| updateParentData(): void { | ||
| this.getParentData('up-row') | ||
| }, | ||
| clickHandler(e: any): void { | ||
| this.$emit('click'); | ||
| } | ||
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import "../../libs/css/components.scss"; | ||
|
|
||
| .up-col { | ||
| padding: 0; | ||
| /* #ifndef APP-NVUE */ | ||
| box-sizing:border-box; | ||
| /* #endif */ | ||
| /* #ifdef MP */ | ||
| display: block; | ||
| /* #endif */ | ||
| } | ||
|
|
||
| // nvue下百分比无效 | ||
| /* #ifndef APP-NVUE */ | ||
| .up-col-0 { | ||
| width: 0; | ||
| } | ||
|
|
||
| .up-col-1 { | ||
| width: calc(100%/12); | ||
| } | ||
|
|
||
| .up-col-2 { | ||
| width: calc(100%/12 * 2); | ||
| } | ||
|
|
||
| .up-col-3 { | ||
| width: calc(100%/12 * 3); | ||
| } | ||
|
|
||
| .up-col-4 { | ||
| width: calc(100%/12 * 4); | ||
| } | ||
|
|
||
| .up-col-5 { | ||
| width: calc(100%/12 * 5); | ||
| } | ||
|
|
||
| .up-col-6 { | ||
| width: calc(100%/12 * 6); | ||
| } | ||
|
|
||
| .up-col-7 { | ||
| width: calc(100%/12 * 7); | ||
| } | ||
|
|
||
| .up-col-8 { | ||
| width: calc(100%/12 * 8); | ||
| } | ||
|
|
||
| .up-col-9 { | ||
| width: calc(100%/12 * 9); | ||
| } | ||
|
|
||
| .up-col-10 { | ||
| width: calc(100%/12 * 10); | ||
| } | ||
|
|
||
| .up-col-11 { | ||
| width: calc(100%/12 * 11); | ||
| } | ||
|
|
||
| .up-col-12 { | ||
| width: calc(100%/12 * 12); | ||
| } | ||
|
|
||
| /* #endif */ | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { defineMixin } from '../../libs/vue' | ||
| import defProps from './row' | ||
| let crtProp = defProps['row'] as UTSJSONObject | ||
|
|
||
| export const propsRow = defineMixin({ | ||
| props: { | ||
| // 给col添加间距，左右边距各占一半 | ||
| gutter: { | ||
| type: [String, Number], | ||
| default: crtProp['gutter'] | ||
| }, | ||
| // 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) | ||
| justify: { | ||
| type: String, | ||
| default: crtProp['justify'] | ||
| }, | ||
| // 垂直对齐方式，可选值为top、center、bottom | ||
| align: { | ||
| type: String, | ||
| default: crtProp['align'] | ||
| } | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /* | ||
| * @Author : LQ,jry | ||
| * @Description : | ||
| * @version : 3.0 | ||
| * @Date : 2021-08-20 16:44:21 | ||
| * @LastAuthor : jry | ||
| * @lastTime : 2024-08-20 14:20:58 | ||
| * @FilePath : /uview-plus/libs/config/props/row.js | ||
| */ | ||
| export default { | ||
| // row | ||
| row: { | ||
| gutter: 0, | ||
| justify: 'start', | ||
| align: 'center' | ||
| } | ||
| } as UTSJSONObject |
Oops, something went wrong.