leiyun
/
ai_uniapp_v2
1
0
Derivar 0
Código Questões 0 Pedidos de integração 0 Lançamentos 0 Wiki Trabalho
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
1 Cometer
1 Ramo
4.2 MiB
 
 
 
Árvore: 635772c47b
Ramos Etiquetas
${ item.name }
Criar ramo ${ searchTerm }
de '635772c47b'
${ noResults }
ai_uniapp_v2/uni_modules/uview-plus/components/u-cell/u-cell.vue

288 linhas
8.9 KiB
Em bruto Responsabilidade Histórico 

  1. <template>

  2. 	<view class="u-cell" :class="[customClass]" :style="[addStyle(customStyle)]"

  3. 		:hover-class="(!disabled && (clickable || isLink)) ? 'u-cell--clickable' : ''" :hover-stay-time="250"

  4. 		@tap="clickHandler">

  5. 		<view class="u-cell__body" :class="[ center && 'u-cell--center', size === 'large' && 'u-cell__body--large']">

  6. 			<view class="u-cell__body__content">

  7. 				<view class="u-cell__left-icon-wrap" v-if="$slots.icon || icon">

  8. 					<slot name="icon" v-if="$slots.icon">

  9. 					</slot>

  10. 					<up-icon v-else :name="icon"

  11. 						:custom-style="iconStyle"

  12. 						:size="size === 'large' ? 22 : 18"></up-icon>

  13. 				</view>

  14. 				<view class="u-cell__title">

  15.                     <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->

  16. 					<slot name="title" v-if="$slots.title || !title">

  17. 					</slot>

  18.                     <text v-else class="u-cell__title-text" :style="[cellTitleDynamicStyle, titleTextStyle]"

  19.                         :class="[required && 'u-cell--required', disabled && 'u-cell--disabled', size === 'large' && 'u-cell__title-text--large']">{{ title }}</text>

  20. 					<slot name="label">

  21. 						<text class="u-cell__label" v-if="label"

  22. 							:style="[cellLabelDynamicStyle]"

  23. 							:class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__label--large']">{{ label }}</text>

  24. 					</slot>

  25. 				</view>

  26. 			</view>

  27. 			<slot name="value">

  28. 				<text class="u-cell__value"

  29. 					:style="[cellValueDynamicStyle]"

  30. 					:class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__value--large']"

  31. 					v-if="!testEmpty(value)">{{ value }}</text>

  32. 			</slot>

  33. 			<view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink"

  34. 				:class="[`u-cell__right-icon-wrap--${arrowDirection}`]">

  35. 				<up-icon v-if="rightIcon && !$slots['right-icon']" :name="rightIcon"

  36. 					:custom-style="rightIconStyle" :color="disabled ? cellDisabledColor : 'info'"

  37. 					:size="size === 'large' ? 18 : 16"></up-icon>

  38. 				<slot v-else name="right-icon">

  39. 				</slot>

  40. 			</view>

  41. 			<view class="u-cell__right-icon-wrap" v-if="$slots['righticon']"

  42. 				:class="[`u-cell__right-icon-wrap--${arrowDirection}`]">

  43. 				<slot name="righticon">

  44. 				</slot>

  45. 			</view>

  46. 		</view>

  47. 		<u-line v-if="border"></u-line>

  48. 	</view>

  49. </template>

  50. 

  51. <script>

  52. 	import { props } from './props';

  53. 	import { mpMixin } from '../../libs/mixin/mpMixin';

  54. 	import { mixin } from '../../libs/mixin/mixin';

  55. 	import { addStyle } from '../../libs/function/index';

  56. 	import test from '../../libs/function/test';

  57. 	/**

  58. 	 * cell  单元格

  59. 	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。

  60. 	 * @tutorial https://uview-plus.jiangruyi.com/components/cell.html

  61. 	 * @property {String | Number}	title			标题

  62. 	 * @property {String | Number}	label			标题下方的描述信息

  63. 	 * @property {String | Number}	value			右侧的内容

  64. 	 * @property {String}			icon			左侧图标名称，或者图片链接(本地文件建议使用绝对地址)

  65. 	 * @property {Boolean}			disabled		是否禁用cell	

  66. 	 * @property {Boolean}			border			是否显示下边框 (默认 true )

  67. 	 * @property {Boolean}			center			内容是否垂直居中(主要是针对右侧的value部分) (默认 false )

  68. 	 * @property {String}			url				点击后跳转的URL地址

  69. 	 * @property {String}			linkType		链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作 (默认 'navigateTo' )

  70. 	 * @property {Boolean}			clickable		是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ） 

  71. 	 * @property {Boolean}			isLink			是否展示右侧箭头并开启点击反馈 （默认 false ）

  72. 	 * @property {Boolean}			required		是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) （默认 false ）

  73. 	 * @property {String}			rightIcon		右侧的图标箭头 （默认 'arrow-right'）

  74. 	 * @property {String}			arrowDirection	右侧箭头的方向，可选值为：left，up，down

  75. 	 * @property {Object | String}			rightIconStyle	右侧箭头图标的样式

  76. 	 * @property {Object | String}			titleStyle		标题的样式

  77. 	 * @property {Object | String}			iconStyle		左侧图标样式

  78. 	 * @property {String}			size			单位元的大小，可选值为 large，normal，mini 

  79. 	 * @property {Boolean}			stop			点击cell是否阻止事件传播 (默认 true )

  80. 	 * @property {Object}			customStyle		定义需要用到的外部样式

  81. 	 * 

  82. 	 * @event {Function}			click			点击cell列表时触发

  83. 	 * @example 该组件需要搭配cell-group组件使用，见官方文档示例

  84. 	 */

  85. 	export default {

  86. 		name: 'u-cell',

  87. 		data() {

  88. 			return {

  89. 

  90. 			}

  91. 		},

  92. 		mixins: [mpMixin, mixin, props],

  93. 		computed: {

  94. 			titleTextStyle() {

  95. 				return addStyle(this.titleStyle)

  96. 			},

  97. 			cellDisabledColor() {

  98. 				return this.upThemeVar('--up-disabled-color', '#c8c9cc')

  99. 			},

  100. 			cellTitleDynamicStyle() {

  101. 				return {

  102. 					color: this.upThemeVar('--up-main-color', '#303133')

  103. 				}

  104. 			},

  105. 			cellLabelDynamicStyle() {

  106. 				return {

  107. 					color: this.upThemeVar('--up-tips-color', '#909399')

  108. 				}

  109. 			},

  110. 			cellValueDynamicStyle() {

  111. 				return {

  112. 					color: this.upThemeVar('--up-content-color', '#606266')

  113. 				}

  114. 			}

  115. 		},

  116. 		emits: ['click'],

  117. 		methods: {

  118. 			addStyle,

  119. 			testEmpty: test.empty,

  120. 			// 点击cell

  121. 			clickHandler(e) {

  122. 				if (this.disabled) return

  123. 				this.$emit('click', {

  124. 					name: this.name

  125. 				})

  126. 				// 如果配置了url(此props参数通过mixin引入)参数，跳转页面

  127. 				this.openPage()

  128. 				// 是否阻止事件传播

  129. 				this.stop && this.preventEvent(e)

  130. 			},

  131. 		}

  132. 	}

  133. </script>

  134. 

  135. <style lang="scss" scoped>

  136. 

  137. 	$u-cell-padding: 13px 15px !default;

  138. 	$u-cell-font-size: 15px !default;

  139. 	$u-cell-line-height: 24px !default;

  140. 	$u-cell-color: $u-main-color !default;

  141. 	$u-cell-icon-size: 16px !default;

  142. 	$u-cell-title-font-size: 15px !default;

  143. 	$u-cell-title-line-height: 22px !default;

  144. 	$u-cell-title-color: $u-main-color !default;

  145. 	$u-cell-label-font-size: 12px !default;

  146. 	$u-cell-label-color: $u-tips-color !default;

  147. 	$u-cell-label-line-height: 18px !default;

  148. 	$u-cell-value-font-size: 14px !default;

  149. 	$u-cell-value-color: $u-content-color !default;

  150. 	$u-cell-clickable-color: var(--up-hover-bg-color, #f1f1f1) !default;

  151. 	$u-cell-disabled-color: $u-disabled-color !default;

  152. 	$u-cell-padding-top-large: 13px !default;

  153. 	$u-cell-padding-bottom-large: 13px !default;

  154. 	$u-cell-value-font-size-large: 15px !default;

  155. 	$u-cell-label-font-size-large: 14px !default;

  156. 	$u-cell-title-font-size-large: 16px !default;

  157. 	$u-cell-left-icon-wrap-margin-right: 4px !default;

  158. 	$u-cell-right-icon-wrap-margin-left: 4px !default;

  159. 	$u-cell-title-flex:1 !default;

  160. 	$u-cell-label-margin-top:5px !default;

  161. 

  162. 

  163. 	.u-cell {

  164. 		&__body {

  165. 			@include flex();

  166. 			/* #ifndef APP-NVUE */

  167. 			box-sizing: border-box;

  168. 			/* #endif */

  169. 			padding: $u-cell-padding;

  170. 			font-size: $u-cell-font-size;

  171. 			color: $u-cell-color;

  172. 			// line-height: $u-cell-line-height;

  173. 			align-items: center;

  174. 

  175. 			&__content {

  176. 				@include flex(row);

  177. 				align-items: center;

  178. 				flex: 1;

  179. 			}

  180. 

  181. 			&--large {

  182. 				padding-top: $u-cell-padding-top-large;

  183. 				padding-bottom: $u-cell-padding-bottom-large;

  184. 			}

  185. 		}

  186. 

  187. 		&__left-icon-wrap,

  188. 		&__right-icon-wrap {

  189. 			@include flex();

  190. 			align-items: center;

  191. 			// height: $u-cell-line-height;

  192. 			font-size: $u-cell-icon-size;

  193. 		}

  194. 

  195. 		&__left-icon-wrap {

  196. 			margin-right: $u-cell-left-icon-wrap-margin-right;

  197. 		}

  198. 

  199. 		&__right-icon-wrap {

  200. 			margin-left: $u-cell-right-icon-wrap-margin-left;

  201. 			transition: transform 0.3s;

  202. 

  203. 			&--up {

  204. 				transform: rotate(-90deg);

  205. 			}

  206. 

  207. 			&--down {

  208. 				transform: rotate(90deg);

  209. 			}

  210. 		}

  211. 

  212. 		&__title {

  213. 			flex: $u-cell-title-flex;

  214. 			display: flex;

  215. 			flex-direction: column;

  216. 

  217. 			&-text {

  218. 				font-size: $u-cell-title-font-size;

  219. 				line-height: $u-cell-title-line-height;

  220. 				color: $u-cell-title-color;

  221. 

  222. 				&--large {

  223. 					font-size: $u-cell-title-font-size-large;

  224. 				}

  225. 			}

  226. 

  227. 		}

  228. 

  229. 		&__label {

  230. 			margin-top: $u-cell-label-margin-top;

  231. 			font-size: $u-cell-label-font-size;

  232. 			color: $u-cell-label-color;

  233. 			line-height: $u-cell-label-line-height;

  234. 

  235. 			&--large {

  236. 				font-size: $u-cell-label-font-size-large;

  237. 			}

  238. 		}

  239. 

  240. 		&__value {	

  241. 			text-align: right;

  242. 			/* #ifndef APP-NVUE */

  243. 			margin-left: auto;

  244. 			/* #endif */	

  245. 			font-size: $u-cell-value-font-size;

  246. 			line-height: $u-cell-line-height;

  247. 			color: $u-cell-value-color;

  248. 			&--large {

  249. 				font-size: $u-cell-value-font-size-large;

  250. 			}

  251. 		}

  252. 

  253. 		&--required {

  254. 			/* #ifndef APP-NVUE */

  255. 			overflow: visible;

  256. 			/* #endif */

  257. 			@include flex;

  258. 			align-items: center;

  259. 		}

  260. 

  261. 		&--required:before {

  262. 			position: absolute;

  263. 			/* #ifndef APP-NVUE */

  264. 			content: '*';

  265. 			/* #endif */

  266. 			left: -8px;

  267. 			margin-top: 4rpx;

  268. 			font-size: 14px;

  269. 			color: $u-error;

  270. 		}

  271. 

  272. 		&--clickable {

  273. 			background-color: $u-cell-clickable-color;

  274. 		}

  275. 

  276. 		&--disabled {

  277. 			color: $u-cell-disabled-color;

  278. 			/* #ifndef APP-NVUE */

  279. 			cursor: not-allowed;

  280. 			/* #endif */

  281. 		}

  282. 

  283. 		&--center {

  284. 			align-items: center;

  285. 		}

  286. 	}

  287. </style>