uni-app怎么写组件
这里给大家写一个返回上一页的组件
一个好的组件的样式是可以在引用的时候做修改的,第三点会说明这些参数,都是一一对应的
<template>
<view class=" fle " :style="{height:height+'rpx'}">
<view class="iconfont fon_3" @tap="come_b" :style="{fontSize:size + 'rpx',color:color}">

</view>
<view class="fle hei100" >
<text class="fle" :style="{alignSelf:text_fle_what,fontSize:text_size+'rpx',color:text_color}">
<!-- 我有一头小毛驴我从来也不骑 -->
{{text_name}}
</text>
</view>
</view>
</template>
这里的顺序依次是:字体图标的大小,文字大小,文字内容,字体图标颜色,文字颜色,标签高度,文字位置(弹性布局)---------一整个组件可能会改的样式都在这里了
<script>
export default {
name:"come_back",
props:{
size:{
type:Number,
default:40
},
text_size:{
type:Number,
default:48
},
text_name:{
type:String,
default:'哦?'
},
color:{
type:String,
default:'white'
},
text_color:{
type:String,
default:'white'
},
height:{
type:Number,
default:80
},
text_fle_what:{
type:String,
default:'flex-end'
}
},
data() {
return {
};
},
methods:{
come_b(){
uni.navigateBack({
})
},
}
}
</script>
css
比如这个标签的高,字体图标的大小,文字标签的内容,文字大小
<template>
<view>
<come_back :height="80" :size="68" text_name="首页" :text_size="36">
</come_back>
</view>
</template>
<script>
// 给组件命个名
import come_back from "@/components/come_back/come_back.vue"
export default {
// 挂载组件
components: {
come_back
},
data() {
return {
}
},
methods: {
}
}
</script>
一个简单的组件就这样写好了,你学会了吗?
本文地址:https://blog.csdn.net/TChildeSeven/article/details/107518053
如对本文有疑问, 点击进行留言回复!!
2020牛客暑期多校训练营(第四场)H.Harder Gcd Problem
Spark系列(一)Spark简介与架构以及Spark安装流程(单机版和分布式版)---轻松上手Spark流处理
淘淘商城第60讲——搭建Solr集群时,报错:org.apache.solr.common.SolrException: Could not find collection : core1
网友评论