123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- <template>
- <div class="center">
- <template v-for="(item,index) in stringArr">
- <span
- :key="index"
- @click="checkItem(item,index)"
- ref="span"
- :class="{
- 'saga-warning': isWarning(index)
- } "
- class="cut-string saga-border pointer border-hover"
- >{{item}}</span>
- </template>
- </div>
- </template>
- <script>
- export default {
- props: {
- string: {
- type: String,
- default: ""
- },
- closedStr: {
- type: String,
- default: ""
- }
- },
- data() {
- return {
- // stringArr: this.string.split(""),
- obj: {},
- arr: [],
- keywordIndexArr: []
- }
- },
- computed: {
- stringArr(){
- return this.string.split("")
- }
- },
- created() {this.recursiveGetIndex(0)},
- mounted() {},
- methods: {
- //是否在危险状态
- isWarning(val){
- if(this.keywordIndexArr.indexOf(val) > -1){
- return true
- }else{
- return false
- }
- },
- recursiveGetIndex(start){ //递归获取满足关键字的索引值
- if (this.closedStr) {
- let index = this.string.indexOf(this.closedStr,start)
- if(index != -1){
- for(let i = 0; i < this.closedStr.length; i++){
- this.keywordIndexArr.push(index + i)
- }
- this.recursiveGetIndex(index + this.closedStr.length)
- }
- }
- },
- aiGetIndex(str){ //递归获取满足ai关键字的索引值
- let index = this.string.indexOf(str),
- arr = []
- if(index != -1){
- for(let i = 0; i < str.length; i++){
- arr.push(index + i)
- }
- }
- return arr
- },
- checkItem(item, index) {
- if(this.obj.hasOwnProperty(index)){
- delete this.obj[index]
- let classList = this.$refs.span[index].getAttribute('class')
- if(classList.indexOf('bg') > -1){
- classList = classList.split('bg')
- }
- this.$refs.span[index].setAttribute('class',classList)
- }else{
- this.obj[index] = item
- let classList = this.$refs.span[index].getAttribute('class') + ' bg'
- this.$refs.span[index].setAttribute('class',classList)
- }
- },
- clear(str) {
- this.obj = {}
- // this.stringArr = this.string.split("")
- for(let i = 0; i < this.stringArr.length; i++){
- if (this.$refs.span && this.$refs.span[i]) {
- let classList = this.$refs.span[i].getAttribute('class')
- if(classList.indexOf('bg') > -1){
- classList = classList.split('bg')
- }
- this.$refs.span[i].setAttribute('class',classList)
- }
- }
- if(!!str){
- let aiIndexArr = this.aiGetIndex(str)
- // let strsArr = str.split("")
- // strsArr.map((item,index) => {
- for(let j = 0; j < this.stringArr.length;j++){
- if(aiIndexArr.indexOf(j) > -1){
- this.obj[j] = this.stringArr[j]
- let classList = this.$refs.span[j].getAttribute('class') + ' bg'
- this.$refs.span[j].setAttribute('class',classList)
- }
- }
- // })
- }
- },
- getData() {
- let string = ""
- for (let key in this.obj) {
- string += this.obj[key]
- }
- return string
- }
- },
- watch: {
- string: function() {
- this.keywordIndexArr = []
- this.recursiveGetIndex(0)
- this.clear()
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .cut-string {
- width: 30px;
- height: 30px;
- text-align: center;
- line-height: 30px;
- font-size: 14px;
- display: inline-block;
- box-sizing: border-box;
- margin: 0 5px;
- }
- .saga-warning{
- color: #fff;
- background-color: #e6a23c;
- border-color: #e6a23c;
- }
- .bg {
- background: #409EFF;
- color: #fff;
- border-color: #409EFF;
- }
- </style>
|