txt看书网页 vue weui elementui

最新推荐文章于 2024-09-03 17:02:58 发布

chaochao670

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量303

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/chaochao670/article/details/127408942

版权

头显阅读私人定制 Vue应用 OLED护眼电子书阅读器

关键词由CSDN通过智能技术生成

追求观影体验，买了个头显

模拟20米远眺巨幕式观感，无蓝光OLED 护眼（广告声称），想用来看书，没有看书APP但可上网，写了个基于vue的看书页面，可换书翻页，服务器上备txt格式的书，一页显示800字，可换字体，字颜色背景颜色，目前感觉效果尚可，做个记录留存

<el-select size="small" v-model="fontsz" placeholder="字体大小" style="width:10%">
<el-option v-for="item in fontszSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>

<el-select size="small" v-model="fontcl" placeholder="字体颜色" style="width:10%">
<el-option v-for="item in fontclSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>

<el-select size="small" v-model="lineht" placeholder="行距" style="width:10%">
<el-option v-for="item in linehtSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>

<el-select size="small" v-model="backcl" placeholder="背景颜色" style="width:15%">
<el-option v-for="item in bgcolorSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>

<el-select size="small" v-model="bookName"
@change="changeBook($event)"
placeholder="书列表" style="width:40%">
<el-option v-for="item in bookLstSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>

</div>
<div :style="bgclstr">
<span :class="classes" :style="stlstr" >
{{alldt}}
</span>
</div>
</div>

</body>
<script>
const main=new Vue( {
el: '#idFirst',
data: {
alldt: "私人定制看书程序 chao",
bookName: "",
pageNum:0,
pageVarNum:800,//每页字数多少
currentPage:1 ,
bookLstSl: [ ],
varNumSl: [
                           { value: '800', label: '字数 800' },
                           { value: '1000', label: '字数 1000' },
                           { value: '1500', label: '字数 1500' },
                           { value: '2000', label: '字数 2000' },
                           ],
               bgcolorSl: [
                           { value: '#D1EEEE', label: '背景蓝1' },
                           { value: '#BFEFFF', label: '背景蓝2' },
                           { value: '#B4CDCD', label: '背景蓝3' },
                           { value: '#9BCD9B', label: '背景绿1' },
                           { value: '#71C671', label: '背景绿2' },
                           { value: '#9AFF9A', label: '背景绿3' },
                           { value: '#c2e9cf', label: '背景绿4' },
                           { value: '#CDC9C9', label: '背景灰1' },
                           { value: '#D1D1D1', label: '背景灰2' },
                           { value: '#A6A6A6', label: '背景灰3' },
                           { value: '#FFFFFF', label: '背景白色' },
                           { value: '#000000', label: '背景黑色' },
                           ],
               linehtSl: [
                           { value: '0', label: '行距0' },
                           { value: '1', label: '行距1' },
                           { value: '2', label: '行距2' },
                           { value: '3', label: '行距3' },
                           { value: '4', label: '行距4' }
                           ],
               fontclSl: [
                           { value: 'f-black', label: '黑色' },
                           { value: 'f-white', label: '白色' },
                           { value: 'f-blue', label: '蓝色' }
                           ],
               fontszSl: [
                           { value: 'f11', label: '11号' },
                           { value: 'f12', label: '12号' },
                           { value: 'f13', label: '13号' },
                           { value: 'f14', label: '14号' },
                           { value: 'f15', label: '15号' },
                           { value: 'f16', label: '16号' },
                           { value: 'f31', label: '31号' },
                           { value: 'f32', label: '32号' },
                           { value: 'f35', label: '35号' },
                           { value: 'f40', label: '40号' },
                           { value: 'f45', label: '45号' },
                           { value: 'f50', label: '50号' },
                           { value: 'f55', label: '55号' }
                                                   ],
                                           fontsz:"f12",
                                           lineht:"2",
                                           pageIdx:1,
                                           fontcl:"f-black",
                                           backcl:"#D1EEEE",
                                           classstr:"f-green bg-blue",
                                   },
   methods: {
changeBook(val) {
var vm=this;
var jsonp = {filename:val};
$.ajax({
type: "POST",
url: '../CI/index.php/conFileManage/getBookSize',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(jsonp),
dataType: "json",
success: function (message) {
console.log(message);
vm.$data.pageNum=message.data;
}, error: function (message) {
console.log(message);
}
});
this.freshPg();
},
freshPg() {
var vm=this;
vm.$data.alldt= " _ "+ vm.$data.bookName+" _ 载入中 ... ";
var jsonp = { currentPage: vm.$data.currentPage, pageVarNum: vm.$data.pageVarNum, filename: vm.$data.bookName };
$.ajax({
type: "POST",
url: '../CI/index.php/conFileManage/getBookCtt',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(jsonp),
dataType: "json",
success: function (message) {
vm.$data.alldt=message.data;
}, error: function (message) {
console.log(message);
}
});
},
handleSizeChange(val) {
var vm=this;
vm.$data.pageVarNum=val;
this.freshPg();
},
handleCurrentChange(val) {
var vm=this;
vm.$data.currentPage=val;
this.freshPg();
}
},
created: function (){
var vm=this;
$.getJSON('/CI/index.php/conFileManage/uptBkList',function(result){
vm.$data.bookLstSl= result.data;
if(result.data.length != 0)
vm.$data.bookName=result.data[0].value;
});
/*
var vm=this;
var jsonp = {currentPage:1,pageVarNum:20};
$.ajax({
type: "POST",
url: '../CI/index.php/conFileManage/getBookCtt',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(jsonp),
dataType: "json",
success: function (message) {
console.log(message);
}, error: function (message) {
console.log(message);
}
});
*/

   },
   computed:{
classes(){
           return this.fontsz+' '+this.fontcl+' ';
       },
       stlstr(){
           return 'line-height:'+this.lineht+'em;' ;
       },
       bgclstr(){
           return 'background-color:'+this.backcl+';' ;
       },
   }, watch: {
}
});
                           </script>
                           </html>