uni-app快速导入自己需要的插件

百色野人 發表於 2020-7-21 17:09:00

<pre><code>在uni-app中快速导入自己需要的插件
在uni-app的官网上;找到自己需要的插件；
然后点击右侧顶部的【使用HX导入】这一步的前提是你必须要用自己的账好登录；
然后选择你要导入哪一个项目然后就可以了
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1425695/202007/1425695-20200721170836862-328463595.png" alt="" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1425695/202007/1425695-20200721170844303-1680186686.png" alt="" loading="lazy"></p>
<p>插件</p>
<pre><code><template>



<view class="bg">
<view class="steps">
<view class="steps_item" v-for="(i, index) in infoList">
<view class="s_r">
<view class="line" :style="{backgroundColor:index != 0?backgroundColor:'rgba(0,0,0,0)'}"></view>
<view class="index" :style="{backgroundColor:backgroundColor,color:color}">
{{ index + 1 }}
</view>
<view class="line" :style="{backgroundColor:index != infoList.length-1?backgroundColor:'rgba(0,0,0,0)'}"></view>
</view>
<view class="s_l">
<view class="info_item" @tap="topage(index)">
<text>{{ i.date }}</text>
<view :style="{WebkitLineClamp:lineNum!=0?lineNum:''}">{{ i.info }}</view>
</view>
</view>
</view>
</view>
</view>
</template>

<script>
export default {
name: 'YSteps',
props: {
infoList: {
type: Array,
default: []
},
color: {
type: String,
default: '#fff'
},
backgroundColor: {
type: String,
default: '#ff3838'
},
lineNum: {
type: Number,
default: 0
}
},
data() {
return {};
},
onLoad(e) {
//获取列表
},
methods: {
topage(e) {
this.$emit('click', e);
}
}
};
</script>

<style lang="scss" scoped>
page {
background-color: #f2f2f2;
}

.bg {
margin: 20upx 0;
background-color: #f2f2f2;
display: flex;
}

.steps {
display: flex;
flex-direction: column;

.steps_item {
display: flex;

.s_r {
padding: 0 20rpx;
display: flex;
flex-direction: column;
align-items: center;

.line {
flex: 1;
width: 5rpx;
background-color: #fff;
}

.index {
width: 40rpx;
height: 40rpx;
font-size: 12px;
text-align: center;
line-height: 40rpx;
border-radius: 50rpx;
}
}

.s_l {
display: flex;
flex-direction: column;
padding: 20rpx 0;

.info_item {
background-color: #FFFFFF;
margin-right: 30upx;
border-radius: 10upx;
display: flex;
flex-direction: column;
justify-content: center;
padding: 30upx;
box-shadow: 0 10rpx 30rpx #ddd;
width: 580rpx;

text {
font-size: 18px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 25px;
}

view {
font-size: 14px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;

flex-direction: column;
}
}

.info_item:active {
background-color: #f4f4f4;
}
}
}
}

// .steps {
// display: flex;
// flex-direction: column;
// margin: 0 30upx;

// .steps_item {
// display: flex;
// align-items:center ;
// background-color: #fff;
// margin-top: 10rpx;
// .s_r {
// display: flex;
// flex-direction: column;
// align-items: center;
// height: 100%;
// background-color: #f3f;
// flex: 1;
// view {
// height: 100%;
// display: flex;
// flex: 1;
// height: 100%;
// width: 5upx;
// }

// text {
// display: flex;
// flex-direction: column;
// align-items: center;
// width: 40upx;
// line-height: 40upx;
// height: 40upx;
// border-radius: 50%;
// background-color: #ff3838;
// color: #ffffff;
// font-size: 10px;
// }
// }
// }
// }

// .info_list {
// display: flex;
// flex-direction: column;
// flex: 1;

// .info_item {
// background-color: #fff;
// height: 200upx;
// margin: 20upx 0;
// margin-right: 30upx;
// border-radius: 10upx;
// display: flex;
// flex-direction: column;
// justify-content: center;
// padding: 0 30upx;

// text {
// font-size: 18px;
// font-family: PingFangSC-Medium, PingFang SC;
// font-weight: 500;
// color: rgba(51, 51, 51, 1);
// line-height: 25px;
// }

// view {
// font-size: 14px;
// font-family: PingFangSC-Regular, PingFang SC;
// font-weight: 400;
// color: rgba(102, 102, 102, 1);
// line-height: 20px;
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 2;
// flex-direction: column;
// }
// }

// .info_item:active {
// opacity: 0.6;
// }
// }
</style>

</code></pre>
<p>使用</p>
<pre><code><view style="background-color: #f2f2f2;padding-top: 100rpx;">
<YSteps lineNum='0' color='#fff' backgroundColor='#000fff' :infoList='list'></YSteps>
</view>

import YSteps from '../../components/Y-Steps/Y-Steps.vue'

list: [
{
date: '2020-1-4',
info: '我一次来到这个这个阅读网站'
},
{
date: '2020-2-4',
info: '我写下了自己的第一篇文章'
},
{
date: '2020-3-4',
info: '我的文章超阅读量过了10W'
},
{
date: '2020-4-4',
info: '我成为写作达人'
},
],

components:{
   YSteps
}

</code></pre>

</div>
<div id="MySignature" role="contentinfo">
<div style="width:818px;background:#f5f5f5; padding: 10px 10px 10px 10px; border: 1px dashed rgb(224, 224, 224); font-family: 微软雅黑; font-size: 13px;" >
         <h1 style="font-size: 24px;"> 遇见问题，这是你成长的机会，如果你能够解决，这就是收获。 </h1>
   <div style="padding:10px">
         作者：晚来南风晚相识 <br>
         出处：https://www.cnblogs.com/IwishIcould/ <br>
                     <p> 想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！</p>
         <p>如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！</P>
         <p> 万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！</p>
                     <p> 想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！</p>
<div style="display: flex;">
<div style="margin-right: 100px;text-align: center;">
<img src="//images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179">
<div>
支付宝
</div>
</div>
<div style="text-align: center;">
<img src="//images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg">
<div>微信</div>
</div>
</div>
         本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接 <br>
         如果文中有什么错误，欢迎指出。以免更多的人被误导。 <br>

   </div>


</div><br><br>
来源：https://www.cnblogs.com/IwishIcould/p/13356149.html

頁: [1]

琼殿技术论坛's Archiver

uni-app快速导入自己需要的插件