zsearch-pro
v1.2.0
Published
An element ui style universal search box
Downloads
3
Readme
Z-Search
An element ui style universal search box If you need help, please tell me -->[email protected]
##Version
version:1.1.3 update time:2021-08-25 describe: Test passed by FodderFish
##Example Code <z-search :rule="rule" :span="20" display-mode="mode2" @searchOk="searchOk" />
<script>
import ZSearch from 'zsearch-pro'
export default {
name: 'app',
components: { ZSearch },
data () {
return {
rule: [
{
type: "input",
field: "a",
title: "搜索条件A",
value: '',
props: {
type: "text",
style: "width:100%",
op: "like"
},
col: {
span: 12
}
},
{
type: "input",
field: "b",
title: "搜索条件B",
value: '',
props: {
type: "text",
style: "width:100%",
op: "like"
},
col: {
span: 12
}
},
{
type: "select",
field: "c",
title: "搜索条件C",
props: {
multiple: false,
style: "width:100%"
},
col: {
span: 12
}
},
{
type: "select",
field: "d",
title: "搜索条件D",
props: {
multiple: false,
style: "width:100%"
},
col: {
span: 12
}
},
{
type: "select",
field: "e",
title: "搜索条件E",
props: {
multiple: false,
style: "width:100%"
},
col: {
span: 12
}
},
{
type: "select",
field: "f",
title: "搜索条件F",
props: {
multiple: false,
style: "width:100%"
},
col: {
span: 12
}
}
]
}
},
methods: {
searchOk(option, value) {
this.$message.success(option + "," + value);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Help
<1> ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf Add this dependency to webpack.config.js:
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
Build Setup
<1> install dependencies
npm install
<2> install element ui
npm i element-ui -S
<3>In main.js, write the following:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
<4> Introducing the form - the create
npm i @form-create/element-ui
<5>Add in main.js:
import formCreate from '@form-create/element-ui'
import zsearch from 'zsearch-pro'
Vue.use(formCreate)
Vue.use(zsearch)
<5> build for production with minification
npm run build