video页面设计
This commit is contained in:
parent
60df3aeaad
commit
d1ea031c88
|
|
@ -35,17 +35,14 @@ const install = (Vue, vm) => {
|
|||
//获取子任务单位的详细信息
|
||||
let getSubtaskDept = (id, params)=> vm.$u.get(`/quality/inspectdept/${id}/`, params);
|
||||
let getInspectRecords = (params)=> vm.$u.get('/quality/inspectrecord/', params);
|
||||
|
||||
let getInspectRecord = (id, params)=> vm.$u.get(`/quality/inspectrecord/${id}/`, params);
|
||||
|
||||
let checkInspectRecord = (id, params)=> vm.$u.put(`/quality/inspectrecord/${id}/check/`, params);
|
||||
|
||||
let startInspectDept = (id, params)=>vm.$u.put(`/quality/inspectdept/${id}/start/`, params);//开始检查
|
||||
|
||||
let upInspectDept = (id, params)=>vm.$u.put(`/quality/inspectdept/${id}/up/`, params);//提交记录
|
||||
|
||||
let appointChecker = (params) => vm.$u.post('/quality/inspectrecord/appoint/', params);//检查指派
|
||||
let getDocument = (params={})=>vm.$u.get('/quality/document/', params);//文档
|
||||
let getVideos = (params={})=>vm.$u.get('/vod/video/', params);//点播视频
|
||||
let getDickey = (params={})=>vm.$u.get('/system/dict/', params);//查询字典
|
||||
vm.$u.api = {getUserInfo,
|
||||
getCode,
|
||||
codeLogin,
|
||||
|
|
@ -63,7 +60,9 @@ const install = (Vue, vm) => {
|
|||
upInspectDept,
|
||||
appointChecker,
|
||||
startInspectDept,
|
||||
getDocument
|
||||
getDocument,
|
||||
getVideos,
|
||||
getDickey
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const install = (Vue, vm) => {
|
|||
// }
|
||||
showLoading: true,
|
||||
loadingText: '请求中..',
|
||||
originalData: true,
|
||||
originalData: false,
|
||||
loadingTime: 800,
|
||||
loadingMask: true
|
||||
});
|
||||
|
|
@ -39,7 +39,7 @@ const install = (Vue, vm) => {
|
|||
Vue.prototype.$u.http.interceptor.response = (response) => {
|
||||
// 如果把originalData设置为了true，这里得到将会是服务器返回的所有的原始数据
|
||||
// 判断可能变成了res.statueCode，或者res.data.code之类的，请打印查看结果
|
||||
const res = response.data
|
||||
const res = response
|
||||
if( res.code >= 200 && res.code < 300 ) {
|
||||
// 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
|
||||
return res;
|
||||
|
|
@ -54,6 +54,9 @@ const install = (Vue, vm) => {
|
|||
})
|
||||
return false;
|
||||
}
|
||||
else if(res.code == 404){
|
||||
return false
|
||||
}
|
||||
else{
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
|
|
|
|||
|
|
@ -110,6 +110,25 @@
|
|||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/vod/index",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": true,
|
||||
"onReachBottomDistance":100
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/vod/video",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "white",
|
||||
|
|
@ -128,12 +147,12 @@
|
|||
"selectedIconPath": "static/common/homec.png",
|
||||
"text": "主页"
|
||||
},
|
||||
// {
|
||||
// "pagePath": "pages/uview/uview",
|
||||
// "iconPath": "static/uview/example/js.png",
|
||||
// "selectedIconPath": "static/uview/example/js_select.png",
|
||||
// "text": "uview"
|
||||
// },
|
||||
{
|
||||
"pagePath": "pages/vod/video",
|
||||
"iconPath": "static/common/play.png",
|
||||
"selectedIconPath": "static/common/playc.png",
|
||||
"text": "点播"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/my/my",
|
||||
"iconPath": "static/common/me.png",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<uni-search-bar @confirm="search" ></uni-search-bar>
|
||||
</view>
|
||||
<list style="width: 100%;">
|
||||
<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
|
||||
<cell v-for="(item,index) in videos" :key="item.id">
|
||||
<video class="video" :id="'video'+index" :src="item.mediaurl" controls object-fit="cover"
|
||||
:poster="item.coverurl"></video>
|
||||
</cell>
|
||||
</list>
|
||||
<view style="color:gray;text-align: center;margin-top:20upx">{{loadingText}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
loadingText: '加载中...',
|
||||
videos: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getVideos()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.page = 1
|
||||
this.getVideos()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page = this.page + 1
|
||||
this.getVideos()
|
||||
},
|
||||
methods: {
|
||||
search(){
|
||||
|
||||
},
|
||||
getVideos() {
|
||||
this.loadingText = '加载中...'
|
||||
this.$u.api.getVideos({
|
||||
page: this.page
|
||||
}).then(res => {
|
||||
uni.stopPullDownRefresh()
|
||||
if (this.page == 1) {
|
||||
if (res.data.results.length == 0) {
|
||||
this.loadingText = '暂无视频'
|
||||
} else {
|
||||
this.loadingText = ''
|
||||
this.videos = res.data.results
|
||||
}
|
||||
} else {
|
||||
this.loadingText = ''
|
||||
this.videos.concat(res.data.results)
|
||||
}
|
||||
}).catch(res => {
|
||||
uni.stopPullDownRefresh()
|
||||
if (res.code == 404) {
|
||||
this.loadingText = '到底了'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.video {
|
||||
width: 100%;
|
||||
height: 380rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<template>
|
||||
<view>
|
||||
<view style="height: 80upx;">
|
||||
<uni-search-bar @confirm="search"></uni-search-bar>
|
||||
</view>
|
||||
<scroll-view class="nav-scroll" :enable-flex="true" scroll-with-animation :throttle="false"
|
||||
:scroll-left="scrollToLeft" scroll-x @scroll="handleScroll">
|
||||
<view class="nav uni-nav">
|
||||
<view class="nav-item" :class="swiperIndex == index ? 'nav-item-act' : ''" :key="item.title"
|
||||
v-for="(item, index) in list" @click="taggleNav(index)">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="nav-line" :style="style"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="swiper">
|
||||
<swiper :current="swiperIndex" :duration="300" class="swiper-1" easing-function="linear"
|
||||
@change="swiperChange">
|
||||
<swiper-item v-for="(item, index) in list" :key="item.title">
|
||||
<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
|
||||
@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
|
||||
@scrolltolower="swiperScrollLower">
|
||||
<view>
|
||||
<view class="swiper-item-list" v-for="sub_item in item.content" :key="sub_item">
|
||||
{{ sub_item }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperIndex: 0, //当前的swiperindex
|
||||
navItemWidth: '', //选中下划线的宽度
|
||||
navItemLeft: 0, //选中下划线的显示位置
|
||||
scrollToLeft: 0, //scrollview需要滚动的距离
|
||||
navInfos: [], //所有navitem的节点信息
|
||||
parentLeft: 0, //nav盒子的节点信息
|
||||
componentWidth: 0, //nav盒子的宽度
|
||||
list: [{
|
||||
id: 0,
|
||||
title: '全部',
|
||||
content: []
|
||||
}],
|
||||
refreStatus: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
return `width:${this.navItemWidth}px; left:${this.navItemLeft}px`;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.init();
|
||||
},
|
||||
onLoad() {
|
||||
this.$u.api.getDickey({
|
||||
pageoff: true,
|
||||
type__code: 'data_video'
|
||||
}).then(res => {
|
||||
let list = [{
|
||||
id: 0,
|
||||
title: '全部',
|
||||
content: []
|
||||
}]
|
||||
for (var i = 0; i < res.data.length; i++) {
|
||||
let data = res.data[i]
|
||||
list.push({
|
||||
id: data.id,
|
||||
title: data.name,
|
||||
page: 1,
|
||||
loadingText:'加载中...',
|
||||
content: []
|
||||
})
|
||||
}
|
||||
this.list = list
|
||||
this.$nextTick(function() {
|
||||
this.init()
|
||||
});
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 获取dom信息
|
||||
init() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.uni-nav').fields({
|
||||
rect: true,
|
||||
size: true
|
||||
}, res => {
|
||||
this.parentLeft = res.left;
|
||||
this.componentWidth = res.width;
|
||||
console.log('res==>', res);
|
||||
});
|
||||
query.selectAll('.nav-item').fields({
|
||||
rect: true,
|
||||
size: true
|
||||
}, data => {
|
||||
console.log(data)
|
||||
data.forEach((item, index) => {
|
||||
if (index == 0) {
|
||||
this.navItemWidth = item.width;
|
||||
this.navItemLeft = item.left;
|
||||
}
|
||||
this.navInfos.push({
|
||||
width: item.width,
|
||||
left: item.left
|
||||
});
|
||||
});
|
||||
});
|
||||
query.exec();
|
||||
},
|
||||
// 点击导航切换swiper
|
||||
taggleNav(val) {
|
||||
this.swiperIndex = val;
|
||||
},
|
||||
// 滚动tabs以及移动下划线
|
||||
scrollDom() {
|
||||
let info = this.navInfos[this.swiperIndex];
|
||||
let offsetLeft = info.left - this.parentLeft;
|
||||
let scrollLeft = offsetLeft - (this.componentWidth - info.width) / 2;
|
||||
this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
|
||||
this.navItemLeft = this.navInfos[this.swiperIndex].left;
|
||||
setTimeout(() => {
|
||||
this.navItemWidth = info.width;
|
||||
}, 50);
|
||||
},
|
||||
// swiper的index变动
|
||||
swiperChange(e) {
|
||||
this.swiperIndex = e.detail.current;
|
||||
this.scrollDom();
|
||||
this.$emit('currentIndex', this.swiperIndex);
|
||||
},
|
||||
// tabs-scrollview触底
|
||||
handleScroll(e) {
|
||||
this.scrollDom();
|
||||
},
|
||||
// swiper-ScrollLower触底
|
||||
swiperScrollLower() {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: `此时为${this.list[this.swiperIndex].title}触底`
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.getData();
|
||||
}, 500);
|
||||
},
|
||||
// 生成列表数据
|
||||
getData() {
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
setTimeout(() => {
|
||||
for (let index = 0; index < 10; index++) {
|
||||
let arr = this.list[this.swiperIndex].content;
|
||||
this.$set(arr, arr.length, Math.random() + '-' + index + this.list[this.swiperIndex]
|
||||
.title);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}, 1000);
|
||||
console.log(this.list[this.swiperIndex]);
|
||||
},
|
||||
// 下拉事件
|
||||
handleRefre() {
|
||||
this.refreStatus = true;
|
||||
uni.showLoading({
|
||||
title: '下拉加载中'
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.list[this.swiperIndex].content = [];
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.list[this.swiperIndex].content.push([this.list[this.swiperIndex].title + '下拉-' + i]);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
this.refreStatus = false;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin: 0 16upx;
|
||||
text-align: center;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
height: 80upx;
|
||||
padding: 20upx 0;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef H5 */
|
||||
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
|
||||
scroll-view ::v-deep ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.nav-item-act {
|
||||
color: pink;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.nav-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 10upx;
|
||||
border-radius: 10upx;
|
||||
background-color: pink;
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
swiper {
|
||||
height: calc(100vh - 160upx);
|
||||
}
|
||||
|
||||
swiper-item {
|
||||
text-align: center;
|
||||
color: #000;
|
||||
position: relative;
|
||||
background-color: skyblue;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.swiper-item-list {
|
||||
height: 400upx;
|
||||
border-bottom: 2upx solid pink;
|
||||
line-height: 400upx;
|
||||
}
|
||||
|
||||
.swiper-scroll {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -34,11 +34,11 @@ const store = new Vuex.Store({
|
|||
vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {},
|
||||
vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
|
||||
// vuex_host: 'http://127.0.0.1:8000',
|
||||
// vuex_api: 'http://127.0.0.1:8000/api',
|
||||
vuex_api: 'http://47.95.0.242:9101/api',
|
||||
// vuex_apifile: 'http://127.0.0.1:8000/api/file/',
|
||||
|
||||
vuex_host: 'https://testsearch.ctc.ac.cn',
|
||||
vuex_api: 'https://testsearch.ctc.ac.cn/api',
|
||||
// vuex_api: 'https://testsearch.ctc.ac.cn/api',
|
||||
vuex_apifile: 'https://testsearch.ctc.ac.cn/api/file/',
|
||||
|
||||
// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
## 1.0.9（2021-05-12）
|
||||
- 新增 项目示例地址
|
||||
## 1.0.8（2021-04-21）
|
||||
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||
## 1.0.7（2021-04-15）
|
||||
- uni-ui 新增 uni-search-bar 的 focus 事件
|
||||
|
||||
## 1.0.6（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
|
||||
## 1.0.5（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 支持双向绑定
|
||||
- 更改 input 事件的返回值，e={value:Number} --> e=value
|
||||
- 新增 支持图标插槽
|
||||
- 新增 支持 clear、blur 事件
|
||||
- 新增 支持 focus 属性
|
||||
- 去掉组件背景色
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
<template>
|
||||
<view class="uni-searchbar">
|
||||
<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box" @click="searchClick">
|
||||
<view class="uni-searchbar__box-icon-search">
|
||||
<slot name="searchIcon">
|
||||
<uni-icons color="#999999" size="18" type="search" />
|
||||
</slot>
|
||||
</view>
|
||||
<input v-if="show || searchVal" :focus="showSync" :placeholder="placeholder" :maxlength="maxlength" class="uni-searchbar__box-search-input"
|
||||
confirm-type="search" type="text" v-model="searchVal" @confirm="confirm" @blur="blur" @focus="emitFocus" />
|
||||
<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
|
||||
<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="uni-searchbar__box-icon-clear"
|
||||
@click="clear">
|
||||
<slot name="clearIcon">
|
||||
<uni-icons color="#c0c4cc" size="15" type="clear" />
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
<text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelText}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* SearchBar 搜索栏
|
||||
* @description 评分组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=866
|
||||
* @property {Number} radius 搜索栏圆角
|
||||
* @property {Number} maxlength 输入最大长度
|
||||
* @property {String} placeholder 搜索栏Placeholder
|
||||
* @property {String} clearButton = [always|auto|none] 是否显示清除按钮
|
||||
* @value always 一直显示
|
||||
* @value auto 输入框不为空时显示
|
||||
* @value none 一直不显示
|
||||
* @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
|
||||
* @value always 一直显示
|
||||
* @value auto 输入框不为空时显示
|
||||
* @value none 一直不显示
|
||||
* @property {String} cancelText 取消按钮的文字
|
||||
* @property {String} bgColor 输入框背景颜色
|
||||
* @property {Boolean} focus 是否自动聚焦
|
||||
* @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
|
||||
* @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
|
||||
* @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
|
||||
* @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
|
||||
* @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "UniSearchBar",
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请输入搜索内容"
|
||||
},
|
||||
radius: {
|
||||
type: [Number, String],
|
||||
default: 5
|
||||
},
|
||||
clearButton: {
|
||||
type: String,
|
||||
default: "auto"
|
||||
},
|
||||
cancelButton: {
|
||||
type: String,
|
||||
default: "auto"
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "#F8F8F8"
|
||||
},
|
||||
maxlength: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
value: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
showSync: false,
|
||||
searchVal: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.searchVal = newVal
|
||||
if (newVal) {
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
},
|
||||
focus: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.showSync = true
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
searchVal(newVal, oldVal) {
|
||||
this.$emit("input", newVal)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchClick() {
|
||||
if (this.show) {
|
||||
return
|
||||
}
|
||||
this.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.showSync = true
|
||||
})
|
||||
},
|
||||
clear() {
|
||||
this.$emit("clear", {
|
||||
value: this.searchVal
|
||||
})
|
||||
this.searchVal = ""
|
||||
},
|
||||
cancel() {
|
||||
this.$emit("cancel", {
|
||||
value: this.searchVal
|
||||
});
|
||||
this.searchVal = ""
|
||||
this.show = false
|
||||
this.showSync = false
|
||||
// #ifndef APP-PLUS
|
||||
uni.hideKeyboard()
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord()
|
||||
// #endif
|
||||
},
|
||||
confirm() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.hideKeyboard();
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord()
|
||||
// #endif
|
||||
this.$emit("confirm", {
|
||||
value: this.searchVal
|
||||
})
|
||||
},
|
||||
blur() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.hideKeyboard();
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord()
|
||||
// #endif
|
||||
this.$emit("blur", {
|
||||
value: this.searchVal
|
||||
})
|
||||
},
|
||||
emitFocus(e) {
|
||||
this.$emit("focus", e.detail)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$uni-searchbar-height: 36px;
|
||||
|
||||
.uni-searchbar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
padding: $uni-spacing-col-base;
|
||||
// background-color: $uni-bg-color;
|
||||
}
|
||||
|
||||
.uni-searchbar__box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: $uni-searchbar-height;
|
||||
padding: 5px 8px 5px 0px;
|
||||
border-width: 0.5px;
|
||||
border-style: solid;
|
||||
border-color: $uni-border-color;
|
||||
}
|
||||
|
||||
.uni-searchbar__box-icon-search {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
// width: 32px;
|
||||
padding: 0 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $uni-text-color-placeholder;
|
||||
}
|
||||
|
||||
.uni-searchbar__box-search-input {
|
||||
flex: 1;
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.uni-searchbar__box-icon-clear {
|
||||
align-items: center;
|
||||
line-height: 24px;
|
||||
padding-left: 8px;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-searchbar__text-placeholder {
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color-placeholder;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.uni-searchbar__cancel {
|
||||
padding-left: 10px;
|
||||
line-height: $uni-searchbar-height;
|
||||
font-size: 14px;
|
||||
color: $uni-text-color;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
{
|
||||
"id": "uni-search-bar",
|
||||
"displayName": "uni-search-bar 搜索栏",
|
||||
"version": "1.0.9",
|
||||
"description": "搜索栏组件，通常用于搜索商品、文章等",
|
||||
"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-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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
|
||||
|
||||
## SearchBar 搜索栏
|
||||
|
||||
> **组件名：uni-search-bar**
|
||||
> 代码块： `uSearchBar`
|
||||
|
||||
|
||||
评分组件
|
||||
|
||||
### 安装方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||
|
||||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
|
||||
### 基本用法
|
||||
|
||||
在 ``template`` 中使用组件
|
||||
|
||||
```html
|
||||
<!-- 基本用法 -->
|
||||
<uni-search-bar @confirm="search" @input="input" ></uni-search-bar>
|
||||
|
||||
<!-- v-model 用法 -->
|
||||
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @change="change" @clear="clear">
|
||||
|
||||
<!-- 自定义Placeholder -->
|
||||
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>
|
||||
|
||||
<!-- 设置圆角 -->
|
||||
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
### SearchBar Props
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:-: |:-: |:-: |:-: |
|
||||
|value/v-model |StringNumber | |搜索栏绑定值 |
|
||||
|placeholder |String |搜索 |搜索栏Placeholder |
|
||||
|radius |Number |10 |搜索栏圆角，单位px |
|
||||
|clearButton |String |auto |是否显示清除按钮，可选值`always`-一直显示、`auto`-输入框不为空时显示、`none`-一直不显示 |
|
||||
|cancelButton |String |auto |是否显示取消按钮，可选值`always`-一直显示、`auto`-输入框不为空时显示、`none`-一直不显示 |
|
||||
|cancelText |String |取消 |取消按钮的文字 |
|
||||
|bgColor |String |#F8F8F8|输入框背景颜色 |
|
||||
|maxlength |Number |100 |输入最大长度 |
|
||||
|focus |Boolean |false | |
|
||||
|
||||
|
||||
### SearchBar Events
|
||||
|
||||
|事件称名 |说明 |返回参数 |
|
||||
|:-: |:-: |:-: |
|
||||
|@confirm |uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value |e={value:Number} |
|
||||
|@input |uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value|e=value |
|
||||
|@cancel |点击取消按钮时触发事件，返回参数为uniSearchBar的value |e={value:Number} |
|
||||
|@clear |点击清除按钮时触发事件，返回参数为uniSearchBar的value |e={value:Number} |
|
||||
|@focus |input 获取焦点时触发事件，返回参数为uniSearchBar的value |e={value:Number} |
|
||||
|@blur |input 失去焦点时触发事件，返回参数为uniSearchBar的value |e={value:Number} |
|
||||
|
||||
### 替换 icon 的 slot 插槽
|
||||
|
||||
|插槽称名 |说明 |
|
||||
|:-: |:-: |
|
||||
|searchIcon |替换组件的搜索图标|
|
||||
|clearIcon |替换组件的清除图标|
|
||||
|
||||
```html
|
||||
<!-- 替换组件的搜索图标 -->
|
||||
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
|
||||
</uni-search-bar>
|
||||
|
||||
<!-- 替换组件的清除图标 -->
|
||||
<uni-search-bar placeholder="自定义clearIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
|
||||
<view slot="clearIcon" style="color: #999999" >X</view>
|
||||
</uni-search-bar>
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar)
|
||||
Loading…
Reference in New Issue